Skip to content

50Projects-HTML-CSS-JavaScript : Typing speed test #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 21, 2024
Merged

50Projects-HTML-CSS-JavaScript : Typing speed test #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5d8ea78
Add the project
tajulafreen Dec 21, 2024
d37c389
update readme
tajulafreen Dec 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,17 @@ In order to run this project you need:
</details>
</li>

<li>
<details>
<summary>Typing Speed Test</summary>
<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>
<ul>
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/TypingSpeedTest/">Live Demo</a></li>
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/TypingSpeedTest">Source</a></li>
</ul>
</details>
</li>

</ol>

<p align="right">(<a href="#readme-top">back to top</a>)</p>
Expand Down
25 changes: 25 additions & 0 deletions Source-Code/TypingSpeedTest/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!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="style.css">
</head>
<body>
<div class="container">
<h1>Typing Speed Test</h1>
<div class="text-display" id="text-display">
<p id="random-text">Click "Start" to begin!</p>
</div>
<textarea id="typed-text" placeholder="Start typing..." disabled></textarea>
<div class="results">
<div id="wpm">WPM: 0</div>
<div id="accuracy">Accuracy: 100%</div>
</div>
<button id="start-btn">Start</button>
</div>

<script src="script.js"></script>
</body>
</html>
63 changes: 63 additions & 0 deletions Source-Code/TypingSpeedTest/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
// Get the necessary elements
const startButton = document.getElementById('start-btn');
const typedText = document.getElementById('typed-text');
const randomText = document.getElementById('random-text');
const wpmDisplay = document.getElementById('wpm');
const accuracyDisplay = document.getElementById('accuracy');

const sampleTexts = [
'The quick brown fox jumps over the lazy dog.',
'JavaScript is a versatile programming language.',
'A journey of a thousand miles begins with a single step.',
'To be or not to be, that is the question.',
'Typing tests help improve typing speed and accuracy.',
];

let startTime;

// Start the typing test
function startTest() {
const randomIndex = Math.floor(Math.random() * sampleTexts.length);
randomText.textContent = sampleTexts[randomIndex];
typedText.disabled = false;
typedText.value = '';
typedText.focus();
startButton.disabled = true;
startTime = new Date().getTime();
wpmDisplay.textContent = 'WPM: 0';
accuracyDisplay.textContent = 'Accuracy: 100%';
}

// Calculate typing speed (WPM) and accuracy
function calculateResults() {
const typedValue = typedText.value;
const randomTextValue = randomText.textContent;

// Calculate WPM
const timeTaken = (new Date().getTime() - startTime) / 1000; // in seconds
const wordsTyped = typedValue.split(' ').length;
const wpm = Math.round((wordsTyped / timeTaken) * 60);

// Calculate accuracy
let correctChars = 0;
for (let i = 0; i < typedValue.length; i += 1) {
if (typedValue[i] === randomTextValue[i]) {
correctChars += 1;
}
}
const accuracy = Math.round((correctChars / typedValue.length) * 100);

wpmDisplay.textContent = `WPM: ${wpm}`;
accuracyDisplay.textContent = `Accuracy: ${accuracy}%`;

if (typedValue === randomTextValue) {
setTimeout(() => {
alert('Test Complete! Well done!');
startButton.disabled = false;
}, 100);
}
}

// Event listeners
startButton.addEventListener('click', startTest);
typedText.addEventListener('input', calculateResults);
75 changes: 75 additions & 0 deletions Source-Code/TypingSpeedTest/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: 60%;
max-width: 600px;
}

h1 {
color: #333;
}

.text-display {
margin: 20px 0;
font-size: 1.2em;
line-height: 1.5em;
}

textarea {
width: 80%;
height: 100px;
padding: 10px;
font-size: 1.2em;
margin-bottom: 20px;
border-radius: 8px;
border: 1px solid #ccc;
resize: none;
outline: none;
}

textarea:disabled {
background-color: #f0f0f0;
}

.results {
margin-top: 20px;
}

#start-btn {
background-color: #4caf50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.1em;
transition: background-color 0.3s;
}

#start-btn:hover {
background-color: #45a049;
}

#start-btn:disabled {
background-color: #ccc;
cursor: not-allowed;
}

#wpm,
#accuracy {
font-size: 1.2em;
margin: 5px 0;
}