Speed Typing Test
About this app
Test your typing speed with this fun speed typing game.
Speed Typing Test Speed Typing Test Type the given words as fast as you can! Words per Minute: 0 Start Game
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Speed Typing Test</title>
<meta name="description" content="Test your typing speed with this fun speed typing game.">
<meta name="keywords" content="typing, speed, test, game">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
document.addEventListener("DOMContentLoaded", function() {
let startTime;
let endTime;
let timeElapsed;
let errorCount = 0;
let currentWordIndex = 0;
let words = [];
let typedWords = [];
let gameStarted = false;
const textElement = document.getElementById("text");
const inputElement = document.getElementById("input");
const startButton = document.getElementById("start-button");
// Add event listener to start button
startButton.addEventListener("click", startGame);
// Add event listener to input element
inputElement.addEventListener("input", checkInput);
function startGame() {
words = generateWords();
typedWords = [];
errorCount = 0;
currentWordIndex = 0;
gameStarted = true;
inputElement.value = "";
inputElement.disabled = false;
inputElement.focus();
startButton.disabled = true;
startTime = new Date().getTime();
updateText();
}
function checkInput() {
if (!gameStarted) {
return;
}
const typedWord = inputElement.value.trim();
if (typedWord === words[currentWordIndex]) {
typedWords.push(typedWord);
currentWordIndex++;
if (currentWordIndex === words.length) {
endGame();
} else {
updateText();
}
inputElement.value = "";
inputElement.classList.remove("is-invalid");
} else {
inputElement.classList.add("is-invalid");
errorCount++;
}
}
function endGame() {
gameStarted = false;
inputElement.disabled = true;
startButton.disabled = false;
endTime = new Date().getTime();
timeElapsed = (endTime - startTime) / 1000;
const wordsPerMinute = Math.round(typedWords.length / timeElapsed * 60);
inputElement.value = "";
inputElement.classList.remove("is-invalid");
updateText();
updateWPM(wordsPerMinute);
updateTextColor(wordsPerMinute);
}
function updateText() {
textElement.innerText = words.slice(currentWordIndex).join(" ");
}
function updateWPM(wordsPerMinute) {
const wpmElement = document.getElementById("wpm");
wpmElement.innerText = wordsPerMinute;
}
function updateTextColor(wordsPerMinute) {
const colorRange = 100;
const minWPM = 0;
const maxWPM = 20;
let colorValue = Math.round((wordsPerMinute - minWPM) / (maxWPM - minWPM) * colorRange);
if (colorValue < 0) {
colorValue = 0;
}
if (colorValue > colorRange) {
colorValue = colorRange;
}
const redValue = 255 - Math.round(colorValue / colorRange * 255);
const textColor = `rgb(${redValue}, 0, 0)`;
textElement.style.color = textColor;
}
function generateWords() {
const words = [
"Lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit", "sed", "do",
"eiusmod", "tempor", "incididunt", "ut", "labore", "et", "dolore", "magna", "aliqua", "Ut",
"enim", "ad", "minim", "veniam", "quis", "nostrud", "exercitation", "ullamco", "laboris",
"nisi", "ut", "aliquip", "ex", "ea", "commodo", "consequat", "Duis", "aute", "irure", "dolor",
"in", "reprehenderit", "in", "voluptate", "velit", "esse", "cillum", "dolore", "eu",
"fugiat", "nulla", "pariatur", "Excepteur", "sint", "occaecat", "cupidatat", "non",
"proident", "sunt", "in", "culpa", "qui", "officia", "deserunt", "mollit", "anim", "id", "est",
"laborum"
];
// Shuffle the words array
for (let i = words.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[words[i], words[j]] = [words[j], words[i]];
}
return words;
}
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
body {
font-family: 'Open Sans', sans-serif;
background-color: #f8f9fa;
}
h1 {
text-align: center;
margin-bottom: 2rem;
color: #343a40;
font-weight: bold;
font-size: 2rem;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
#text {
margin-bottom: 1rem;
color: black;
font-size: 1.5rem;
font-weight: bold;
transition: color 0.5s;
}
#input {
font-size: 1.5rem;
}
#input.is-invalid {
border-color: red;
box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.25);
}
#wpm {
font-size: 2rem;
font-weight: bold;
color: #343a40;
}
#start-button {
margin-top: 2rem;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Speed Typing Test</h1>
<p>Type the given words as fast as you can!</p>
<p id="text"></p>
<input id="input" type="text" class="form-control" disabled>
<p>Words per Minute: <span id="wpm">0</span></p>
<button id="start-button" class="btn btn-primary">Start Game</button>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!