Typing Speed Test

Why? Practice timers, input events, and word comparison.

<p id="quote">The quick brown fox jumps over the lazy dog</p>
<textarea id="input" placeholder="Type here..."></textarea>
<p id="result"></p>

<script>
let startTime;

document.getElementById("input").addEventListener("focus", () => {
  startTime = new Date();
});

document.getElementById("input").addEventListener("input", () => {
  let text = document.getElementById("input").value;
  let quote = document.getElementById("quote").innerText;
  
  if(text === quote){
let endTime = new Date();
let timeTaken = (endTime - startTime)/1000;
let speed = Math.round((quote.split(" ").length / timeTaken) * 60);
document.getElementById("result").innerText = ⏱ You typed at ${speed} words per minute!;
} }); </script>

Explanation:

  • When user starts typing, timer begins.
  • When typed text matches the quote, timer stops.
  • Calculates words per minute

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *