Back to Snippets

Simple Online Spacebar Counter with Restart (JS, CSS, HTML)

Test how many times you can press the spacebar with this fun and simple online counter tool. Built with HTML, CSS, and JavaScript, featuring a modern design and a restart button. Great for a quick game or keystroke challenge.

#javascript

#html

#css

#spacebar counter

#keystroke counter

#online game

#interactive tool

#simple project

#event listener

/HTML *CSS ()JS Output Live Updates

/* ==== Spacebar Counter Styles ==== */
body.sbc-active-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #f0f4f8;
  margin: 0;
  color: #333;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.sbc-container {
  background-color: #ffffff;
  padding: 30px 40px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.sbc-title {
  font-size: 2rem;
  color: #2c3e50;
  margin-top: 0;
  margin-bottom: 25px;
}

.sbc-display-area {
  background-color: #e9ecef;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 25px;
}

.sbc-count {
  font-size: 4.5rem;
  font-weight: bold;
  color: #007bff;
  display: block;
  line-height: 1.1;
}

.sbc-label {
  font-size: 1rem;
  color: #6c757d;
  margin-top: 5px;
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sbc-button {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 12px 25px;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sbc-button:hover {
  background-color: #218838;
}

.sbc-button:active {
  background-color: #1e7e34;
  transform: scale(0.98);
}

.sbc-button:focus-visible {
  outline: 2px solid #80c594;
  outline-offset: 2px;
}

.sbc-instructions {
  margin-top: 20px;
  font-size: 0.95rem;
  color: #495057;
}

.sbc-focus-note {
  font-size: 0.8rem;
  color: #888;
  margin-top: 10px;
}

document.addEventListener('DOMContentLoaded', function() {
  const countElement = document.getElementById('sbcCount');
  const restartButton = document.getElementById('sbcRestartBtn');
  const instructionsElement = document.getElementById('sbcInstructions');
  const bodyElement = document.body; // To add a class for specific body styling
  
  let spacebarPresses = 0;
  let gameActive = true; // To potentially pause/resume or just manage state

// Add class to body if this specific snippet is active for unique body styling
  // This check ensures it only applies when the sbc-container is on the page
  if (document.querySelector('.sbc-container')) {
      bodyElement.classList.add('sbc-active-page');
  }

function updateCountDisplay() {
    if (countElement) {
      countElement.textContent = spacebarPresses;
    }
  }

function handleSpacebarPress(event) {
    if (event.code === 'Space' || event.keyCode === 32) {
      event.preventDefault(); // Prevent page scrolling
      if (!gameActive) return;

spacebarPresses++;
      updateCountDisplay();

if (instructionsElement && spacebarPresses === 1) {
        instructionsElement.textContent = 'Keep going!';
      }
    }
  }

function restartCounter() {
    spacebarPresses = 0;
    gameActive = true;
    updateCountDisplay();
    if (instructionsElement) {
      instructionsElement.textContent = 'Press the Spacebar to start counting!';
    }
    // Optionally, re-focus the document or a specific element if focus is lost
    // document.body.focus(); // Simple way to try and ensure keydown events are caught
  }

// Attach event listeners
  document.addEventListener('keydown', handleSpacebarPress);
  if (restartButton) {
    restartButton.addEventListener('click', restartCounter);
  }

// Initial display update
  updateCountDisplay();
});

Simple Online Spacebar Counter with Restart (JS, CSS, HTML)

Share Code Snippet