Skip to content

Commit 5d8ea78

Browse files
tajulafreentajulafreen
committed
Add the project
1 parent 59293e7 commit 5d8ea78

File tree

3 files changed

+163
-0
lines changed

3 files changed

+163
-0
lines changed

‎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)