Typing Speed Test Web Application

A typing speed test measures a person’s speed at the keyboard, typically expressed in words per minute(WPM). Usually, you have to type a specified text in a set amount of time. The principal metrics consists are :

The amount of words typed per minute is known as typing speed.
Total Words: The quantity of words typed in all
Total Time: the amount of time needed to finish typing.

Working & Implentation using html, css and js

Start – The user initiates the test by beginning to type in the designated text box.
Measure Time – A timer keeps track of how long it takes the user to type a text from beginning to the end.
Count Words – This counts the words that have been typed.
Determine speed – The formula for calculating typing speed is (Total words / Time in minutes).
Display Results – The results are shown, along with the typing pace in wpm, total number of words and amount of time spent.

1) 2.html

Html provides the basic structure of typing speed test application. Key function includes:

Container: Keeps the whole thing contained. User’s text to be typed is the test text.
User’s type the specified text in the input textarea.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typing Speed Test</title>
    <link rel="stylesheet" href="design.css">
</head>
<body>
    <div class="container">
        <h1>Typing Speed Test</h1>
        <p id="test-text">Web Development is a good domain in IT sector</p>
        <textarea id="input-text" placeholder="Start Typing"></textarea>
        <div class="results">
            <p>Typing Speed: <span id="typing-speed">0</span>WPM</p>
            <p>Total Words: <span id="total-words">0</span></p>
            <p>Total Time: <span id="total-time">0</span>seconds</p>
        </div>
    </div>
    <script src="task.js"></script>
</body>
</html>

2) design.css

Css is use to style the web application making it look good. It consists of:

Body Styling orients the page content’s centering.
Container Styling gives test container an organized look.
Textarea Styling is use to make the text area easy to utilize.

body {
    font-family: 'Courier New', Courier, monospace;
    background-color: aqua;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    background-color: yellow;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 400px;
    text-align: center;
}

h1 {
    margin-bottom: 20px;
}

#test-text {
    font-size: 18px;
    margin-bottom: 20px;
}

#input-text {
    width: 100%;
    height: 100px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid blue;
    border-radius: 5px;
    box-sizing: border-box;
}

.results {
    margin-top: 20px;
}

.results p {
    margin: 5px 0;
}

.results span {
    font-weight: bold;
}

3) task.js

Javascript helps to add more interactivity and functionality to the web application. It includes:

Timer: Updates every second and starts when user starts typing.
Word Count: It determines how many words have been typed yet.

let startTime;
let endTime;
let timer;

const inputText = document.getElementById('input-text');
const testText = document.getElementById('test-text').innerText;
const typingSpeed = document.getElementById('typing-speed');
const totalWords = document.getElementById('total-words');
const totalTime = document.getElementById('total-time');

inputText.addEventListener('input', startTypingTest);

function startTypingTest() {
    if (!startTime) {
        startTime = new Date();
        timer = setInterval(updateTime, 1000) 
    }

    const typedText = inputText.value;
    const wordCount = countWords(typedText);
    const currentTime = new Date();
    const timeElapsed = (currentTime - startTime) / 1000;

    if (typedText === testText) {
        clearInterval(timer);
        endTime = new Date();
        displayResults(wordCount, timeElapsed);
    }
}

function updateTime() {
    const currentTime = new Date();
    const timeElapsed = (currentTime - startTime) / 1000;
    totalTime.textContent = Math.round(timeElapsed);
}

function countWords(text) {
    return text.trim().split(/\s+/).length;
}

function displayResults(wordCount, timeElapsed) {
    typingSpeed.textContent = Math.round((wordCount / timeElapsed) * 60);
    totalWords.textContent = wordCount;
    totalTime.textContent = Math.round(timeElapsed);
}

inputText.addEventListener('blur',() => {
    if (timer) {
        clearInterval(timer);
        timer = null;
    }
});

Output :

A typing speed test web application that is both useful and pleasing and can be made by the help of using html, css and javascript.

Working & Implentation using html, css and js

Related Posts

Leave a Comment Cancel Reply