Skip to content

Commit 82cf947

Browse files
tajulafreentajulafreen
authored
Merge pull request #45 from tajulafreen/Typing_Speed_Test
50Projects-HTML-CSS-JavaScript : Typing speed test
2 parents 59293e7 + d37c389 commit 82cf947

File tree

4 files changed

+174
-0
lines changed

4 files changed

+174
-0
lines changed

‎README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -474,6 +474,17 @@ In order to run this project you need:
474474
</details>
475475
</li>
476476

477+
<li>
478+
<details>
479+
<summary>Typing Speed Test</summary>
480+
<p>The Typing Speed Test app is a simple web-based tool that allows users to test and improve their typing speed. The app displays a random sentence, and the user is asked to type it as quickly and accurately as possible. It calculates the typing speed in words per minute (WPM) and measures the accuracy based on the user's input.</p>
481+
<ul>
482+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/TypingSpeedTest/">Live Demo</a></li>
483+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/TypingSpeedTest">Source</a></li>
484+
</ul>
485+
</details>
486+
</li>
487+
477488
</ol>
478489

479490
<p align="right">(<a href="#readme-top">back to top</a>)</p>

‎Source-Code/TypingSpeedTest/index.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Typing Speed Test</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Typing Speed Test</h1>
12+
<div class="text-display" id="text-display">
13+
<p id="random-text">Click "Start" to begin!</p>
14+
</div>
15+
<textarea id="typed-text" placeholder="Start typing..." disabled></textarea>
16+
<div class="results">
17+
<div id="wpm">WPM: 0</div>
18+
<div id="accuracy">Accuracy: 100%</div>
19+
</div>
20+
<button id="start-btn">Start</button>
21+
</div>
22+
23+
<script src="script.js"></script>
24+
</body>
25+
</html>

‎Source-Code/TypingSpeedTest/script.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
// Get the necessary elements
2+
const startButton = document.getElementById('start-btn');
3+
const typedText = document.getElementById('typed-text');
4+
const randomText = document.getElementById('random-text');
5+
const wpmDisplay = document.getElementById('wpm');
6+
const accuracyDisplay = document.getElementById('accuracy');
7+
8+
const sampleTexts = [
9+
'The quick brown fox jumps over the lazy dog.',
10+
'JavaScript is a versatile programming language.',
11+
'A journey of a thousand miles begins with a single step.',
12+
'To be or not to be, that is the question.',
13+
'Typing tests help improve typing speed and accuracy.',
14+
];
15+
16+
let startTime;
17+
18+
// Start the typing test
19+
function startTest() {
20+
const randomIndex = Math.floor(Math.random() * sampleTexts.length);
21+
randomText.textContent = sampleTexts[randomIndex];
22+
typedText.disabled = false;
23+
typedText.value = '';
24+
typedText.focus();
25+
startButton.disabled = true;
26+
startTime = new Date().getTime();
27+
wpmDisplay.textContent = 'WPM: 0';
28+
accuracyDisplay.textContent = 'Accuracy: 100%';
29+
}
30+
31+
// Calculate typing speed (WPM) and accuracy
32+
function calculateResults() {
33+
const typedValue = typedText.value;
34+
const randomTextValue = randomText.textContent;
35+
36+
// Calculate WPM
37+
const timeTaken = (new Date().getTime() - startTime) / 1000; // in seconds
38+
const wordsTyped = typedValue.split(' ').length;
39+
const wpm = Math.round((wordsTyped / timeTaken) * 60);
40+
41+
// Calculate accuracy
42+
let correctChars = 0;
43+
for (let i = 0; i < typedValue.length; i += 1) {
44+
if (typedValue[i] === randomTextValue[i]) {
45+
correctChars += 1;
46+
}
47+
}
48+
const accuracy = Math.round((correctChars / typedValue.length) * 100);
49+
50+
wpmDisplay.textContent = `WPM: ${wpm}`;
51+
accuracyDisplay.textContent = `Accuracy: ${accuracy}%`;
52+
53+
if (typedValue === randomTextValue) {
54+
setTimeout(() => {
55+
alert('Test Complete! Well done!');
56+
startButton.disabled = false;
57+
}, 100);
58+
}
59+
}
60+
61+
// Event listeners
62+
startButton.addEventListener('click', startTest);
63+
typedText.addEventListener('input', calculateResults);

‎Source-Code/TypingSpeedTest/style.css

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-color: #f4f4f9;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
height: 100vh;
8+
margin: 0;
9+
}
10+
11+
.container {
12+
text-align: center;
13+
background-color: #fff;
14+
padding: 20px;
15+
border-radius: 8px;
16+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
17+
width: 60%;
18+
max-width: 600px;
19+
}
20+
21+
h1 {
22+
color: #333;
23+
}
24+
25+
.text-display {
26+
margin: 20px 0;
27+
font-size: 1.2em;
28+
line-height: 1.5em;
29+
}
30+
31+
textarea {
32+
width: 80%;
33+
height: 100px;
34+
padding: 10px;
35+
font-size: 1.2em;
36+
margin-bottom: 20px;
37+
border-radius: 8px;
38+
border: 1px solid #ccc;
39+
resize: none;
40+
outline: none;
41+
}
42+
43+
textarea:disabled {
44+
background-color: #f0f0f0;
45+
}
46+
47+
.results {
48+
margin-top: 20px;
49+
}
50+
51+
#start-btn {
52+
background-color: #4caf50;
53+
color: white;
54+
padding: 10px 20px;
55+
border: none;
56+
border-radius: 5px;
57+
cursor: pointer;
58+
font-size: 1.1em;
59+
transition: background-color 0.3s;
60+
}
61+
62+
#start-btn:hover {
63+
background-color: #45a049;
64+
}
65+
66+
#start-btn:disabled {
67+
background-color: #ccc;
68+
cursor: not-allowed;
69+
}
70+
71+
#wpm,
72+
#accuracy {
73+
font-size: 1.2em;
74+
margin: 5px 0;
75+
}

0 commit comments

Comments
 (0)