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)

    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; +}