Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5d8ea78

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

File tree

3 files changed

+163
-0
lines changed

3 files changed

+163
-0
lines changed
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>
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);
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)

AltStyle によって変換されたページ (->オリジナル) /