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
Leave a Reply