Typing Test

#typing-test {
font-family: sans-serif;
}

textarea#text-input {
width: 100%;
height: 200px;
font-size: 16px;
}

button#start-button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: lightblue;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

#results {
text-align: center;
margin-top: 20px;
}

#results p {
margin: 0;
}
const textInput = document.getElementById(“text-input”);
const startButton = document.getElementById(“start-button”);
const resultsContainer = document.getElementById(“results”);
const wpmDisplay = document.getElementById(“wpm”);
const accuracyDisplay = document.getElementById(“accuracy”);

let startTime;
let endTime;
let text;

startButton.addEventListener(“click”, function() {
// Show the text input and hide the start button
textInput.style.display = “block”;
startButton.style.display = “none”;

// Get the text to type
text = “Type this text for the typing test”;

// Set the text of the text input
textInput.value = text;

// Focus on the text input
textInput.focus();

// Start the timer
startTime = new Date();

// Listen for the input event on the text input
textInput.addEventListener(“input”, function() {
// Check if the user has finished typing
if (textInput.value === text) {
// End the timer
endTime = new Date();

// Calculate the words per minute
let elapsedTime = (endTime – startTime) / 1000;
let words = text.split(” “).length;
let wpm = Math.round(words / (elapsedTime / 60));

// Calculate the accuracy
let charactersTyped = textInput.value.length;
let accuracy = Math.round((charactersTyped / text.length) * 100);

// Show the results
resultsContainer.style.display = “block”;
wpmDisplay.innerText = wpm;
accuracyDisplay.innerText = accuracy;
}
});
});