From 5d8ea78805b50c488c7101a1fdd9651fdb5b8207 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 22 Dec 2024 02:44:37 +0530 Subject: [PATCH 1/2] Add the project --- Source-Code/TypingSpeedTest/index.html | 25 +++++++++ Source-Code/TypingSpeedTest/script.js | 63 ++++++++++++++++++++++ Source-Code/TypingSpeedTest/style.css | 75 ++++++++++++++++++++++++++ 3 files changed, 163 insertions(+) create mode 100644 Source-Code/TypingSpeedTest/index.html create mode 100644 Source-Code/TypingSpeedTest/script.js create mode 100644 Source-Code/TypingSpeedTest/style.css diff --git a/Source-Code/TypingSpeedTest/index.html b/Source-Code/TypingSpeedTest/index.html new file mode 100644 index 0000000..ba0081c --- /dev/null +++ b/Source-Code/TypingSpeedTest/index.html @@ -0,0 +1,25 @@ + + + + + + Typing Speed Test + + + +
+

Typing Speed Test

+
+

Click "Start" to begin!

+
+ +
+
WPM: 0
+
Accuracy: 100%
+
+ +
+ + + + diff --git a/Source-Code/TypingSpeedTest/script.js b/Source-Code/TypingSpeedTest/script.js new file mode 100644 index 0000000..4ff26f2 --- /dev/null +++ b/Source-Code/TypingSpeedTest/script.js @@ -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); diff --git a/Source-Code/TypingSpeedTest/style.css b/Source-Code/TypingSpeedTest/style.css new file mode 100644 index 0000000..cff373b --- /dev/null +++ b/Source-Code/TypingSpeedTest/style.css @@ -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; +} From d37c389f8dd735cc3184f9cadaee0871a62cadd3 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 22 Dec 2024 02:49:08 +0530 Subject: [PATCH 2/2] update readme --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index cda8db1..ec6af70 100644 --- a/README.md +++ b/README.md @@ -474,6 +474,17 @@ In order to run this project you need: +
  • +
    +Typing Speed Test +

    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.

    + +
    +
    • +

    (back to top)