Removing white space from selected text in Visual Studio using a keyboard shortcut

๐Ÿ“ฆ Key shortcuts
โœจ The Prompt Phrase
What keyboard shortcut removes the white space from the selected text in Visual Studio?

~Control K + Control X~

๐Ÿ’ป Code Preview

๐Ÿ“ฆ All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Removing white space from selected text in Visual Studio using a keyboard shortcut - Interactive Tutorial</title>
<style>
:root{
  --bg:#0b0b1a; --bg2:#14142b; --card:rgba(255,255,255,.06); --border:rgba(255,255,255,.14);
  --text:#e8e8f5; --muted:#a3a3c2; --purple:#8b5cf6; --blue:#3b82f6; --green:#22c55e; --amber:#f59e0b;
  --grad:linear-gradient(135deg,var(--purple),var(--blue) 55%,var(--green));
  --code:#0a0a16; --shadow:0 20px 40px rgba(0,0,0,.35);
}
body.light{--bg:#f4f4ff;--bg2:#e8e8fb;--card:rgba(255,255,255,.75);--border:rgba(80,70,160,.2);--text:#1e1b3a;--muted:#55527a;--code:#1e1b3a;--shadow:0 20px 40px rgba(80,70,160,.15)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,sans-serif;background:radial-gradient(circle at 20% 0%,var(--bg2),var(--bg) 60%);color:var(--text);line-height:1.7;min-height:100vh}
.progress{position:fixed;top:0;left:0;height:5px;width:0;background:var(--grad);z-index:100;transition:width .2s}
nav{position:sticky;top:5px;z-index:50;display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;padding:10px;margin:10px auto;max-width:1000px;background:var(--card);backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:18px}
nav a{text-decoration:none;color:var(--muted);font-size:.82rem;padding:6px 12px;border-radius:999px;transition:.2s}
nav a:hover,nav a:focus-visible{background:var(--grad);color:#fff;outline:none}
.icon-btn{background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:6px 12px;cursor:pointer;font-size:.85rem}
main{max-width:900px;margin:0 auto;padding:0 18px 60px}
section{margin:34px 0}
.glass{background:var(--card);backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:24px;padding:28px;box-shadow:var(--shadow)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}
.reveal.show{opacity:1;transform:none}
h2{font-size:1.6rem;margin-bottom:14px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
p{margin-bottom:12px}
code{font-family:Consolas,monospace;background:rgba(139,92,246,.18);padding:1px 6px;border-radius:6px}
.hero{text-align:center;padding:50px 20px 30px}
.hero h1{font-size:clamp(1.8rem,5vw,3rem);line-height:1.2;margin-bottom:16px}
.sub{color:var(--muted);max-width:640px;margin:0 auto 22px}
.keys{display:flex;justify-content:center;gap:10px;align-items:center;flex-wrap:wrap;margin:22px 0}
kbd{display:inline-block;text-align:center;padding:8px 16px;border-radius:10px;font-family:Consolas,monospace;font-weight:700;background:linear-gradient(#2b2b4d,#1b1b34);color:#fff;border:1px solid rgba(255,255,255,.25);border-bottom-width:4px;box-shadow:0 6px 14px rgba(0,0,0,.3)}
p kbd,li kbd,td kbd,.body kbd,.status kbd{padding:2px 8px;font-size:.85rem;border-bottom-width:3px}
.keys kbd{animation:float 3s ease-in-out infinite}
.keys kbd:nth-child(3){animation-delay:.3s}.keys kbd:nth-child(4){animation-delay:.6s}.keys kbd:nth-child(6){animation-delay:.9s}
@keyframes float{50%{transform:translateY(-8px)}}
.plus{font-size:1.3rem;color:var(--muted)}
.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.badge{padding:6px 14px;border-radius:999px;border:1px dashed var(--border);color:var(--muted);font-size:.85rem;filter:grayscale(1);opacity:.55;transition:.4s}
.badge.on{filter:none;opacity:1;color:#fff;background:var(--grad);border-style:solid;transform:scale(1.06)}
.btn{background:var(--grad);color:#fff;border:none;border-radius:12px;padding:10px 18px;font-weight:600;cursor:pointer;transition:.2s;font-size:.95rem}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(139,92,246,.4)}
.btn.ghost{background:var(--card);border:1px solid var(--border);color:var(--text)}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.quote{border-left:4px solid var(--purple);padding:12px 16px;background:rgba(139,92,246,.12);border-radius:0 12px 12px 0;margin:12px 0;text-align:left}
.warn{border-left:4px solid var(--amber);padding:12px 16px;background:rgba(245,158,11,.14);border-radius:0 12px 12px 0;margin:14px 0;text-align:left}
.tip{border-bottom:1px dotted var(--green);cursor:help;position:relative}
.tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:130%;transform:translateX(-50%);width:max-content;max-width:240px;background:#111;color:#fff;padding:8px 12px;border-radius:10px;font-size:.8rem;opacity:0;pointer-events:none;transition:.2s;z-index:10;line-height:1.4}
.tip:hover::after,.tip:focus::after{opacity:1}
ul.list{padding-left:20px}ul.list li{margin-bottom:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.mini{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;transition:.25s}
.mini:hover{transform:translateY(-5px) rotate(-.5deg);border-color:var(--purple)}
.mini .e{font-size:1.8rem}
.steps{list-style:none;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:14px;margin-bottom:12px;align-items:flex-start;cursor:pointer;padding:10px;border-radius:14px;border:1px solid transparent;transition:.2s}
.steps li:hover{background:var(--card)}
.steps li::before{content:counter(s);flex:none;width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700}
.steps li.done{border-color:var(--green)}
.steps li.done::before{content:"โœ“";background:var(--green)}
.editor{background:var(--code);border-radius:16px;border:1px solid var(--border);padding:18px;font-family:Consolas,monospace;font-size:1rem;color:#e6e6f5;white-space:pre-wrap;outline:none;line-height:1.9;position:relative}
.editor:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.25)}
.editor .sel{background:rgba(139,92,246,.55);border-radius:3px}
.editor .ws{color:#6b6b8f}
.menu{margin-top:10px;padding:10px 14px;border-radius:12px;background:#1f1f3a;color:#fff;border:1px solid var(--purple);display:none}
.menu.on{display:block;animation:pop .3s}
@keyframes pop{from{opacity:0;transform:scale(.95)}}
.chord{display:flex;gap:8px;margin:12px 0;align-items:center;flex-wrap:wrap}
.pill{padding:4px 12px;border-radius:999px;background:var(--card);border:1px solid var(--border);font-size:.82rem;color:var(--muted)}
.pill.on{background:var(--grad);color:#fff;border-color:transparent}
.controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.status{margin-top:10px;color:var(--muted);font-size:.92rem;min-height:1.5em}
.tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.tab{background:var(--card);border:1px solid var(--border);color:var(--muted);padding:8px 14px;border-radius:12px;cursor:pointer}
.tab[aria-selected="true"]{background:var(--grad);color:#fff;border-color:transparent}
.codebox{position:relative;background:var(--code);border-radius:16px;padding:18px;padding-top:44px;font-family:Consolas,monospace;font-size:.92rem;overflow-x:auto;color:#e6e6f5;white-space:pre;border:1px solid var(--border)}
.k{color:#c4a5ff}.s{color:#7ee787}.c{color:#7c7ca3;font-style:italic}.t{color:#79c0ff}.hl{background:rgba(236,72,153,.28);border-radius:4px;padding:0 3px}
.copy{position:absolute;top:8px;right:8px;font-size:.78rem;padding:5px 10px}
.anno{margin-top:12px;padding:12px 16px;border-radius:12px;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.3)}
details{background:var(--card);border:1px solid var(--border);border-radius:16px;margin-bottom:10px;overflow:hidden}
summary{cursor:pointer;padding:14px 18px;font-weight:600;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"๏ผ‹";float:right;color:var(--green)}
details[open] summary::after{content:"๏ผ"}
details .body{padding:0 18px 14px}
.bad{color:#fb7185}.good{color:var(--green)}
.q{margin-bottom:22px}
.opts{display:grid;gap:8px;margin-top:10px}
.opt{text-align:left;background:var(--card);border:1px solid var(--border);color:var(--text);padding:12px 14px;border-radius:12px;cursor:pointer;font-size:.95rem;transition:.2s}
.opt:hover:not(:disabled){border-color:var(--purple);transform:translateX(4px)}
.opt.right{background:rgba(34,197,94,.25);border-color:var(--green)}
.opt.wrong{background:rgba(251,113,133,.2);border-color:#fb7185;animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.fb{margin-top:8px;min-height:1.5em;font-size:.9rem}
.score{font-weight:700;font-size:1.1rem}
.cheat{border:2px solid transparent;background:linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--grad) border-box}
body.light .cheat{background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box}
table{width:100%;border-collapse:collapse;margin-top:10px}
td,th{padding:10px;border-bottom:1px solid var(--border);text-align:left;font-size:.92rem}
footer{text-align:center;color:var(--muted);padding:30px 18px 50px;font-size:.9rem}
.confetti{position:fixed;top:-20px;font-size:1.4rem;pointer-events:none;z-index:200;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.8}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
@media(max-width:600px){.glass{padding:18px}}
</style>
</head>
<body>
<div class="progress" id="progress" role="progressbar" aria-label="Reading progress" aria-valuemin="0" aria-valuemax="100"></div>

<nav aria-label="Tutorial sections">
  <a href="#what">What</a><a href="#why">Why</a><a href="#how">How</a><a href="#demo">Demo</a>
  <a href="#code">Code</a><a href="#mistakes">Mistakes</a><a href="#tips">Tips</a><a href="#quiz">Quiz</a><a href="#summary">Cheat Sheet</a>
  <button class="icon-btn" id="theme" aria-label="Toggle dark or light theme">๐ŸŒ™ / โ˜€๏ธ</button>
</nav>

<main>
  <header class="hero reveal" id="top">
    <p>๐ŸŽฎ Level 3 ยท Beginner ยท ~7 minutes</p>
    <h1><span class="grad">Removing white space from selected text</span> in Visual Studio using a keyboard shortcut</h1>
    <p class="sub">Think of a tidy-up button for messy spacing. โœจ You'll learn how Visual Studio's two-step "chord" shortcuts work, and which chord really cleans up white space.</p>
    <div class="keys" aria-label="Control K, then Control X">
      <kbd>Ctrl</kbd><span class="plus">+</span><kbd>K</kbd><span class="plus">then</span><kbd>Ctrl</kbd><span class="plus">+</span><kbd>X</kbd>
    </div>
    <div class="quote"><strong>Question:</strong> What keyboard shortcut removes the white space from the selected text in Visual Studio?<br><strong>Answer given:</strong> <code>Ctrl + K, Ctrl + X</code></div>
    <div class="warn">โš ๏ธ <strong>Accuracy check:</strong> in Visual Studio's default keyboard layout, <code>Ctrl + K, Ctrl + X</code> opens the <em>Insert Snippet</em> menu. The command that deletes horizontal white space is <code>Ctrl + K, Ctrl + \</code>. This tutorial teaches both so you can check your own setup.</div>
    <div class="badges" aria-live="polite">
      <span class="badge" id="b1">๐Ÿ” Explorer</span>
      <span class="badge" id="b2">๐ŸŽน Chord Player</span>
      <span class="badge" id="b3">๐Ÿง  Quiz Master</span>
      <span class="badge" id="b4">๐Ÿ† Shortcut Hero</span>
    </div>
  </header>

  <section id="what" class="glass reveal">
    <h2>๐Ÿค” What Is It?</h2>
    <p>Meet Omar. He pasted code that was full of extra spaces and tabs, such as <code>int&nbsp;&nbsp;&nbsp;x&nbsp;&nbsp;=&nbsp;&nbsp;&nbsp;5;</code>. Deleting each space by hand would take forever. ๐Ÿ˜ฉ</p>
    <p>Visual Studio has many shortcuts called <span class="tip" tabindex="0" data-tip="A chord is a two-step shortcut. Press the first combo, release it, then press the second combo.">chords</span>. Most start with <kbd>Ctrl</kbd>+<kbd>K</kbd>. You press that, let go, and then press a second combo.</p>
    <ul class="list">
      <li><strong>The answer you were given:</strong> <kbd>Ctrl</kbd>+<kbd>K</kbd>, <kbd>Ctrl</kbd>+<kbd>X</kbd>. By default this is <em>Insert Snippet</em>, a menu of ready-made code templates.</li>
      <li><strong>The white-space command:</strong> <code>Edit.DeleteHorizontalWhiteSpace</code>. Its default chord is <kbd>Ctrl</kbd>+<kbd>K</kbd>, <kbd>Ctrl</kbd>+<kbd>\</kbd>.</li>
    </ul>
    <p>Horizontal <span class="tip" tabindex="0" data-tip="White space means spaces and tab characters. They are invisible but take up room.">white space</span> means the spaces and tabs inside a line. If a line has no selection, the command works around the cursor.</p>
    <p>๐Ÿ”ง <em>Why the mismatch?</em> Shortcuts depend on your Visual Studio version, keyboard profile, and any custom bindings. Always confirm in <em>Tools โ†’ Options โ†’ Environment โ†’ Keyboard</em>.</p>
  </section>

  <section id="why" class="glass reveal">
    <h2>๐Ÿš€ Why Use It?</h2>
    <div class="grid">
      <div class="mini"><div class="e">๐Ÿงน</div><strong>Clean pasted code</strong><p>Fix messy spacing after copying from emails or websites.</p></div>
      <div class="mini"><div class="e">โŒจ๏ธ</div><strong>Hands on keys</strong><p>No need to click and press Delete repeatedly.</p></div>
      <div class="mini"><div class="e">๐Ÿ‘€</div><strong>Readable code</strong><p>Consistent spacing makes code easier to review.</p></div>
      <div class="mini"><div class="e">๐Ÿ”Ž</div><strong>Verify shortcuts</strong><p>Learn how to look up what a chord really does.</p></div>
    </div>
  </section>

  <section id="how" class="glass reveal">
    <h2>๐Ÿ› ๏ธ How Does It Work?</h2>
    <p>Click each step as you read it. โœ…</p>
    <ol class="steps" id="steps">
      <li><div><strong>Open a file</strong> in the Visual Studio editor and click inside it.</div></li>
      <li><div><strong>Select the text</strong> with extra white space (drag, or use <kbd>Shift</kbd>+arrows).</div></li>
      <li><div><strong>Press <kbd>Ctrl</kbd>+<kbd>K</kbd></strong>, then release. The status bar says it is waiting for the second key.</div></li>
      <li><div><strong>Press the second combo.</strong> Use <kbd>Ctrl</kbd>+<kbd>\</kbd> to delete white space. <kbd>Ctrl</kbd>+<kbd>X</kbd> opens Insert Snippet instead.</div></li>
      <li><div><strong>Check the result.</strong> Press <kbd>Ctrl</kbd>+<kbd>Z</kbd> if it isn't what you wanted. ๐ŸŽข</div></li>
    </ol>
  </section>

  <section id="demo" class="glass reveal">
    <h2>๐Ÿ•น๏ธ Live Demo: Play the Chord!</h2>
    <p>Click the editor and press <kbd>Ctrl</kbd>+<kbd>K</kbd>, then <kbd>Ctrl</kbd>+<kbd>X</kbd> or <kbd>Ctrl</kbd>+<kbd>\</kbd>. You can also use the buttons. Compare what happens! ๐Ÿ</p>
    <div class="editor" id="editor" tabindex="0" role="application" aria-label="Practice editor. Press Control K, then Control X or Control backslash."></div>
    <div class="menu" id="menu" role="status">๐Ÿ“‹ <strong>Insert Snippet:</strong> if ยท for ยท while ยท class ยท try</div>
    <div class="chord" aria-hidden="true"><span class="pill" id="p1">Step 1: Ctrl+K</span><span>โ†’</span><span class="pill" id="p2">Step 2: second combo</span></div>
    <div class="controls">
      <button class="btn" id="bK">1๏ธโƒฃ Ctrl + K</button>
      <button class="btn ghost" id="bX">2๏ธโƒฃ Ctrl + X</button>
      <button class="btn ghost" id="bS">2๏ธโƒฃ Ctrl + \</button>
      <button class="btn ghost" id="reset">๐Ÿ”„ Reset</button>
    </div>
    <div class="status" id="status" aria-live="polite">Click the editor and start the chord.</div>
  </section>

  <section id="code" class="glass reveal">
    <h2>๐Ÿงฉ Code Breakdown</h2>
    <div class="tabs" role="tablist" aria-label="Examples">
      <button class="tab" role="tab" aria-selected="true" data-i="0">Before and after</button>
      <button class="tab" role="tab" aria-selected="false" data-i="1">Anatomy of a chord</button>
      <button class="tab" role="tab" aria-selected="false" data-i="2">Check your binding</button>
    </div>
    <div class="codebox" id="codebox" role="tabpanel"></div>
    <div class="anno" id="anno"></div>
  </section>

  <section id="mistakes" class="glass reveal">
    <h2>โš ๏ธ Common Mistakes</h2>
    <details open><summary>โŒ Mixing up the two chords</summary><div class="body"><p><span class="bad">Wrong:</span> expecting <kbd>Ctrl</kbd>+<kbd>K</kbd>, <kbd>Ctrl</kbd>+<kbd>X</kbd> to clean spaces. By default it opens Insert Snippet.</p><p><span class="good">Right:</span> use <kbd>Ctrl</kbd>+<kbd>K</kbd>, <kbd>Ctrl</kbd>+<kbd>\</kbd>, or confirm your own binding.</p></div></details>
    <details><summary>โŒ Pressing everything at once</summary><div class="body"><p>A chord is two steps. Press <kbd>Ctrl</kbd>+<kbd>K</kbd>, release, then press the second combo.</p></div></details>
    <details><summary>โŒ Releasing Ctrl too slowly or too early</summary><div class="body"><p>Both <kbd>Ctrl</kbd> presses are normal. Holding Ctrl through both steps usually works too.</p></div></details>
    <details><summary>โŒ Expecting it to change the visible look</summary><div class="body"><p>It only removes spaces and tabs. It does not reformat or re-indent your code. For formatting, look at <em>Format Selection</em>, <kbd>Ctrl</kbd>+<kbd>K</kbd>, <kbd>Ctrl</kbd>+<kbd>F</kbd>.</p></div></details>
    <details><summary>โŒ Trusting a shortcut without checking</summary><div class="body"><p>Bindings vary by profile and version. Look it up in <em>Tools โ†’ Options โ†’ Environment โ†’ Keyboard</em>.</p></div></details>
  </section>

  <section id="tips" class="glass reveal">
    <h2>๐Ÿ’Ž Pro Tips</h2>
    <ul class="list">
      <li>๐Ÿ”Ž Open <em>Tools โ†’ Options โ†’ Environment โ†’ Keyboard</em> and type <code>DeleteHorizontalWhiteSpace</code> to see the real binding.</li>
      <li>๐Ÿงฐ Search <code>InsertSnippet</code> there to confirm what <kbd>Ctrl</kbd>+<kbd>K</kbd>, <kbd>Ctrl</kbd>+<kbd>X</kbd> does on your machine.</li>
      <li>๐Ÿ‘๏ธ Show spaces and tabs with <em>Edit โ†’ Advanced โ†’ View White Space</em> (<kbd>Ctrl</kbd>+<kbd>R</kbd>, <kbd>Ctrl</kbd>+<kbd>W</kbd>).</li>
      <li>๐ŸŽจ Use <em>Format Document</em>, <kbd>Ctrl</kbd>+<kbd>K</kbd>, <kbd>Ctrl</kbd>+<kbd>D</kbd>, for whole-file tidiness.</li>
      <li>โ†ฉ๏ธ Undo with <kbd>Ctrl</kbd>+<kbd>Z</kbd> whenever you experiment.</li>
    </ul>
  </section>

  <section id="quiz" class="glass reveal">
    <h2>๐Ÿง  Practice Quiz</h2>
    <p class="score" id="score">Score: 0 / 3</p>
    <div id="quizBox"></div>
  </section>

  <section id="summary" class="glass cheat reveal">
    <h2>๐Ÿ“Œ Summary Card</h2>
    <table>
      <tr><th>Goal</th><th>Shortcut (default profile)</th></tr>
      <tr><td>Answer given for this question</td><td><kbd>Ctrl</kbd>+<kbd>K</kbd>, <kbd>Ctrl</kbd>+<kbd>X</kbd></td></tr>
      <tr><td>What that chord does by default</td><td>Insert Snippet menu</td></tr>
      <tr><td>Delete horizontal white space</td><td><kbd>Ctrl</kbd>+<kbd>K</kbd>, <kbd>Ctrl</kbd>+<kbd>\</kbd></td></tr>
      <tr><td>Show or hide white space</td><td><kbd>Ctrl</kbd>+<kbd>R</kbd>, <kbd>Ctrl</kbd>+<kbd>W</kbd></td></tr>
      <tr><td>Verify any binding</td><td>Tools โ†’ Options โ†’ Environment โ†’ Keyboard</td></tr>
    </table>
    <div class="controls"><button class="btn" id="copySummary">๐Ÿ“‹ Copy cheat sheet</button></div>
  </section>
</main>

<footer>Made with ๐Ÿ’œ ยท Generated by <strong>AI Prompt Dictionary</strong><br>Keep practicing. Every pro was once a beginner! ๐ŸŒŸ</footer>

<script>
(function(){
  var $=function(s){return document.querySelector(s)}, $$=function(s){return Array.prototype.slice.call(document.querySelectorAll(s))};
  var earned={};
  function badge(id){ if(earned[id])return; earned[id]=1; $('#'+id).classList.add('on'); if(Object.keys(earned).length===3) badge('b4'); }
  $('#theme').onclick=function(){document.body.classList.toggle('light')};

  function onScroll(){
    var h=document.documentElement, p=h.scrollTop/(h.scrollHeight-h.clientHeight)*100||0;
    $('#progress').style.width=p+'%'; $('#progress').setAttribute('aria-valuenow',Math.round(p));
  }
  window.addEventListener('scroll',onScroll,{passive:true}); onScroll();
  var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting)e.target.classList.add('show')})},{threshold:.1});
  $$('.reveal').forEach(function(el){io.observe(el)});

  function confetti(){
    var em=['๐ŸŽ‰','โœจ','๐Ÿ’œ','๐Ÿ’š','โญ','๐ŸŽŠ'];
    for(var i=0;i<40;i++){
      var s=document.createElement('span'); s.className='confetti'; s.textContent=em[i%em.length];
      s.style.left=Math.random()*100+'vw'; s.style.animationDuration=(2+Math.random()*2)+'s'; s.style.animationDelay=Math.random()*.5+'s';
      document.body.appendChild(s); setTimeout(function(x){x.remove()},4800,s);
    }
  }
  function copy(text,btn){
    function ok(){var o=btn.textContent;btn.textContent='Copied โœ“';setTimeout(function(){btn.textContent=o},1400)}
    function fb(){var a=document.createElement('textarea');a.value=text;document.body.appendChild(a);a.select();document.execCommand('copy');a.remove();ok()}
    if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(text).then(ok,fb)}else fb();
  }

  $$('#steps li').forEach(function(li){
    li.tabIndex=0;
    function t(){li.classList.toggle('done'); if($$('#steps li.done').length===5)badge('b1')}
    li.onclick=t; li.onkeydown=function(e){if(e.key==='Enter'||e.key===' '){e.preventDefault();t()}};
  });

  /* demo */
  var ed=$('#editor'), cleaned=false, pending=false, won=false;
  function render(){
    ed.innerHTML='';
    var parts=cleaned
      ? [['int x = 5;',1]]
      : [['int',1],['\u00b7\u00b7\u00b7',0],['x',1],['\u00b7\u00b7',0],['=',1],['\u00b7\u00b7\u00b7',0],['5',1],['\u00b7',0],[';',1]];
    parts.forEach(function(p){
      var s=document.createElement('span'); s.className=p[1]?'sel':'sel ws'; s.textContent=p[0]; ed.appendChild(s);
    });
    $('#p1').classList.toggle('on',pending);
    if(!pending)$('#p2').classList.remove('on');
  }
  function first(){
    pending=true; $('#menu').classList.remove('on'); $('#p1').classList.add('on'); $('#p2').classList.remove('on');
    $('#status').innerHTML='โณ <kbd>Ctrl</kbd>+<kbd>K</kbd> pressed. Waiting for the second combo...'; badge('b2');
  }
  function second(which){
    if(!pending){$('#status').textContent='๐Ÿ‘† Press Ctrl+K first. A chord has two steps!';return}
    pending=false; $('#p2').classList.add('on');
    if(which==='X'){
      $('#menu').classList.add('on');
      $('#status').textContent='๐Ÿ“‹ Insert Snippet opened. This chord does not remove white space by default.';
    } else {
      cleaned=true; $('#menu').classList.remove('on');
      $('#status').textContent='๐ŸŽ‰ White space removed! The dots (spaces) are gone.';
      if(!won){won=true;confetti()}
    }
    render();
  }
  ed.addEventListener('keydown',function(e){
    if(e.ctrlKey&&e.code==='KeyK'){e.preventDefault();first();return}
    if(pending&&e.ctrlKey&&e.code==='KeyX'){e.preventDefault();second('X')}
    else if(pending&&e.ctrlKey&&(e.code==='Backslash'||e.key==='\\')){e.preventDefault();second('S')}
  });
  ed.onclick=function(){ed.focus()};
  $('#bK').onclick=first; $('#bX').onclick=function(){second('X')}; $('#bS').onclick=function(){second('S')};
  $('#reset').onclick=function(){cleaned=false;pending=false;won=false;$('#menu').classList.remove('on');render();$('#status').textContent='Reset. Click the editor and start the chord.'};
  render();

  /* code tabs */
  var ex=[
    {code:'<span class="c">// Before (ยท = space)</span>\n<span class="t">int</span>ยทยทยทxยทยท=ยทยทยท<span class="s">5</span>ยท;\n\n<span class="c">// After deleting horizontal white space</span>\n<span class="hl"><span class="t">int</span> x = <span class="s">5</span>;</span>',
     note:'๐Ÿงน The command removes extra spaces and tabs around the cursor or in the selection. Check your result, because the exact outcome depends on what is selected.'},
    {code:'<span class="k">Ctrl + K</span>        <span class="c">โ† step 1 (starts the chord)</span>\n<span class="k">Ctrl + \\</span>       <span class="c">โ† step 2: Edit.DeleteHorizontalWhiteSpace</span>\n<span class="k">Ctrl + X</span>       <span class="c">โ† step 2 alternative: Edit.InsertSnippet</span>',
     note:'๐ŸŽน The first key combo opens the chord. The second combo picks the command. Two chords can share the same first step but do different things.'},
    {code:'<span class="c">Tools โ†’ Options โ†’ Environment โ†’ Keyboard</span>\n<span class="c">Show commands containing:</span>\n  <span class="s">Edit.DeleteHorizontalWhiteSpace</span>\n  <span class="s">Edit.InsertSnippet</span>\n<span class="c">Look at "Shortcuts for selected command"</span>',
     note:'๐Ÿ”Ž This is the best way to confirm a shortcut. It shows what is bound on <em>your</em> machine, including any custom changes.'}
  ];
  function showEx(i){
    $$('.tab').forEach(function(t){t.setAttribute('aria-selected',String(+t.dataset.i===i))});
    $('#codebox').innerHTML='<button class="btn ghost copy" id="copyCode">Copy</button>'+ex[i].code;
    $('#anno').innerHTML=ex[i].note;
    $('#copyCode').onclick=function(){var tmp=document.createElement('div');tmp.innerHTML=ex[i].code;copy(tmp.textContent,this)};
  }
  $$('.tab').forEach(function(t){t.onclick=function(){showEx(+t.dataset.i)}}); showEx(0);
  $('#copySummary').onclick=function(){
    copy('Visual Studio: Ctrl+K, Ctrl+X = Insert Snippet (default) | Ctrl+K, Ctrl+\\ = Delete Horizontal White Space | Ctrl+R, Ctrl+W = View White Space | Verify in Tools > Options > Environment > Keyboard',this);
  };

  /* quiz */
  var quiz=[
    {q:'What is a "chord" shortcut in Visual Studio?',o:['Pressing every key at once','A two-step shortcut: one combo, then a second combo','A shortcut that only works in Debug mode','A mouse gesture'],a:1,w:'You press the first combo (like Ctrl+K), release, then press the second.'},
    {q:'By default, what does Ctrl + K, Ctrl + X do?',o:['Opens the Insert Snippet menu','Deletes all code','Closes the file','Runs the program'],a:0,w:'Edit.InsertSnippet is bound to this chord by default.'},
    {q:'Where can you check which shortcut a command really uses?',o:['Tools โ†’ Options โ†’ Environment โ†’ Keyboard','Help โ†’ About','File โ†’ Print','Window โ†’ Reset'],a:0,w:'The Keyboard page lists the binding for every command.'}
  ];
  var score=0,answered=0,box=$('#quizBox');
  quiz.forEach(function(item,qi){
    var d=document.createElement('div'); d.className='q';
    var h=document.createElement('strong'); h.textContent=(qi+1)+'. '+item.q; d.appendChild(h);
    var opts=document.createElement('div'); opts.className='opts'; d.appendChild(opts);
    var fb=document.createElement('div'); fb.className='fb'; fb.setAttribute('aria-live','polite'); d.appendChild(fb);
    item.o.forEach(function(txt,oi){
      var b=document.createElement('button'); b.className='opt'; b.textContent=txt;
      b.onclick=function(){
        if(oi===item.a){
          b.classList.add('right'); fb.textContent='โœ… Correct! Great job!'; score++; confetti();
          opts.querySelectorAll('.opt').forEach(function(x){x.disabled=true}); answered++;
          if(answered===3){badge('b3');var m=document.createElement('p');m.className='score grad';m.textContent='๐Ÿ† Quiz complete! You can read any chord like a pro!';box.appendChild(m)}
        } else {
          b.classList.add('wrong'); b.disabled=true; fb.textContent='โŒ Not quite. Try again! ๐Ÿ’ช Hint: '+item.w;
        }
        $('#score').textContent='Score: '+score+' / 3';
      };
      opts.appendChild(b);
    });
    box.appendChild(d);
  });
})();
</script>
</body>
</html>
Live Preview