.png)
Test how fast you can type with this fun Typing Speed Test Game built using HTML, CSS, and JavaScript.
Features include:
-
⏱️ Real-time typing speed calculation (WPM)
-
📊 Accuracy tracking
-
🎮 Interactive and beginner-friendly design
-
📱 Responsive layout for desktop & mobile
Why this project?
Typing speed tests are addictive, useful, and a great way to practice coding. By building this project, you’ll learn about JavaScript timers, events, and DOM manipulation while creating something fun and shareable.
You can even customize the word list, design, or difficulty level to make your own version.
Do check out the video tutorial of this project on my YouTube channel and do subscribe to support me! Thanks!
Here’s the HTML/CSS/JS code for the project 👇
<!-- Created by CodingPorium, 2025. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CodingPorium Typing Speed Test</title> <style> /* Import Poppins Font */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); body{ font-family: poppins,sans-serif; background: #f0f2f5; margin: 0; padding:0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } ::selection{ background: royalblue; color: white; } .container{ width: 90%; max-width: 700px; background: white; border-radius: 15px; box-shadow:0 5px 20px rgba(0,0,0,0.1); overflow:hidden; text-align: center; } .header{ background: royalblue; color: white; padding: 20px; font-size:1.5rem; font-weight:600; } #sentence{ font-size: 18px; margin: 20px; padding: 15px; background: #f7f9fc; border-radius: 10px; color:#333; } textarea{ width: 90%; height:120px; font-size:16px; padding: 10px; border-radius: 10px; border:1px solid #ccc; resize:none; margin-bottom: 20px; } .stats{ margin:20px; font-size: 16px; color:#333; background: #f9f9f9; border-radius: 10px; padding: 15px; } .stats p{ margin:10px 0; } button{ font-family: poppins,sans-serif; margin:20px 0; padding: 12px 25px; border: none; background: royalblue; color:white; font-size: 16px; border-radius: 10px; cursor: pointer; transition: 0.3s; } button:hover{ opacity:0.8; } </style> </head> <body> <div class="container"> <div class="header">⌨️ CodingPorium Typing Speed Test</div> <div id="sentence"></div> <textarea id="input" placeholder="Start typing here..."disabled></textarea> <div class="stats"> <p>⏱ Time : <span id="time">0</span> sec</p> <p>⚡ WPM : <span id="wpm">0</p> <p>✅ Accuracy : <span id="accuracy">0</span> %</p> </div> <button onclick="startGame()">Start Test</button> </div> <script> const sentences = [ "The quick brown fox jumps over the lazy dog", "Coding is fun when you practice every day", "JavaScript makes websites more interactive", "Python is great for beginners to learn programming", "Practice typing to improve your speed and accuracy" ] let currentSentence = ""; let startTime; let timer; let isPlaying = false; const sentenceEl = document.getElementById("sentence"); const inputEl = document.getElementById("input"); const timeEl = document.getElementById("time"); const wpmEl = document.getElementById("wpm"); const accuracyEl = document.getElementById("accuracy"); function startGame(){ if(isPlaying)return; isPlaying = true; // Pick random sentence currentSentence = sentences[Math.floor(Math.random()*sentences.length)]; sentenceEl.textContent = currentSentence; inputEl.value = ""; inputEl.disabled = false; inputEl.focus(); timeEl.textContent = 0; wpmEl.textContent = 0; accuracyEl.textContent = 0; startTime = new Date(); timer = setInterval(updateTime,1000); } function updateTime(){ let elapsed = Math.floor((new Date()- startTime)/1000); timeEl.textContent = elapsed; checkStats(); } function checkStats(){ let typedText = inputEl.value; let elapsed = (new Date()-startTime)/1000/60; //in minutes // WPM calculation let wordsTyped = typedText.trim().split(/\s+/).filter(w => w.length > 0).length; let wpm = Math.round(wordsTyped / elapsed) || 0; wpmEl.textContent = wpm; // Accuracy let correctChars = 0; for (let i = 0; i < typedText.length; i++){ if(typedText[i] === currentSentence[i]){ correctChars++; } } let accuracy = Math.round((correctChars/currentSentence.length) * 100); accuracyEl.textContent = accuracy; // Check if completed if(typedText === currentSentence){ clearInterval(timer); isPlaying = false; inputEl.disabled = true; } } inputEl.addEventListener("input",checkStats); </script> </body> </html>
✨ With just a few lines of code, you’ve built your own version of this project! Keep practicing and soon you’ll be building bigger and more powerful projects.
Thanks for reading, do subscribe our YouTube channel to support us in providing more awesome projects with free source code!
Post a Comment