The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Create a tool to practice keyboard shortcuts

Written by

Bernardo Palos

in

Creating a simple web-based tool to practice keyboard shortcuts can be very useful for learning and improving typing speed and shortcut familiarity. Below is a complete example of a keyboard shortcut practice tool using HTML, CSS, and JavaScript. It shows a random shortcut to press, listens for the user’s key input, and gives feedback.

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Keyboard Shortcut Practice Tool</title>
<style>
  body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 2rem;
    background: #f0f2f5;
  }
  #shortcut {
    font-size: 2rem;
    margin: 2rem 0;
    padding: 1rem 2rem;
    background: #fff;
    display: inline-block;
    border-radius: 8px;
    box-shadow: 0 0 10px #ccc;
  }
  #feedback {
    font-size: 1.5rem;
    margin-top: 1rem;
  }
  #score {
    margin-top: 2rem;
    font-size: 1.25rem;
  }
  button {
    margin-top: 2rem;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    background: #007bff;
    color: white;
  }
  button:hover {
    background: #0056b3;
  }
</style>
</head>
<body>

<h1>Keyboard Shortcut Practice Tool</h1>
<div id="shortcut">Press the displayed shortcut</div>
<div id="feedback"></div>
<div id="score">Score: 0</div>
<button id="nextBtn">Next Shortcut</button>

<script>
  // List of shortcuts to practice
  const shortcuts = [
    { keys: ['Control', 'C'], name: 'Copy' },
    { keys: ['Control', 'V'], name: 'Paste' },
    { keys: ['Control', 'X'], name: 'Cut' },
    { keys: ['Control', 'Z'], name: 'Undo' },
    { keys: ['Control', 'Y'], name: 'Redo' },
    { keys: ['Control', 'A'], name: 'Select All' },
    { keys: ['Control', 'S'], name: 'Save' },
    { keys: ['Alt', 'Tab'], name: 'Switch Window' },
    { keys: ['Control', 'P'], name: 'Print' },
    { keys: ['Control', 'F'], name: 'Find' }
  ];

  let currentShortcut = null;
  let pressedKeys = new Set();
  let score = 0;

  const shortcutDiv = document.getElementById('shortcut');
  const feedbackDiv = document.getElementById('feedback');
  const scoreDiv = document.getElementById('score');
  const nextBtn = document.getElementById('nextBtn');

  function getRandomShortcut() {
    return shortcuts[Math.floor(Math.random() * shortcuts.length)];
  }

  function formatShortcut(keys) {
    return keys.map(k => {
      if (k === 'Control') return 'Ctrl';
      if (k === 'Alt') return 'Alt';
      if (k === 'Shift') return 'Shift';
      return k.toUpperCase();
    }).join(' + ');
  }

  function showShortcut() {
    currentShortcut = getRandomShortcut();
    shortcutDiv.textContent = formatShortcut(currentShortcut.keys);
    feedbackDiv.textContent = '';
    pressedKeys.clear();
  }

  function checkShortcut() {
    if (!currentShortcut) return;

    // Check if all keys in the shortcut are pressed
    const allPressed = currentShortcut.keys.every(key => pressedKeys.has(key.toLowerCase()));

    // Also check if only those keys are pressed (no extras)
    if (allPressed && pressedKeys.size === currentShortcut.keys.length) {
      feedbackDiv.textContent = 'Correct! 🎉';
      score++;
      scoreDiv.textContent = 'Score: ' + score;
      // Automatically load next shortcut after 1 second
      setTimeout(showShortcut, 1000);
    }
  }

  window.addEventListener('keydown', (e) => {
    pressedKeys.add(e.key.toLowerCase());
    checkShortcut();
  });

  window.addEventListener('keyup', (e) => {
    pressedKeys.delete(e.key.toLowerCase());
  });

  nextBtn.addEventListener('click', () => {
    showShortcut();
  });

  // Initialize first shortcut
  showShortcut();
</script>

</body>
</html>

How it works:

  • The tool randomly displays a shortcut like “Ctrl + C” for Copy.

  • The user presses keys on their keyboard.

  • The script listens to keydown and keyup events and tracks which keys are pressed.

  • If the exact shortcut keys are pressed simultaneously, it shows “Correct!” and increases the score.

  • The next shortcut appears automatically after 1 second or by pressing the “Next Shortcut” button.

You can open this code in any modern browser to start practicing keyboard shortcuts. Let me know if you want it expanded with more features or specific shortcuts!

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About