diff --git a/Calculators/Typing-Speed-Calculator/Readme.md b/Calculators/Typing-Speed-Calculator/Readme.md new file mode 100644 index 000000000..8821ed960 --- /dev/null +++ b/Calculators/Typing-Speed-Calculator/Readme.md @@ -0,0 +1,16 @@ +#

Typing Speed Calculator

+ +## Description :- + +A typing speed calculator that calculates the typing speed in two different units:
+i) words/sec and
+ii) characters/sec + +## Tech Stack :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- +![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/dc4f9d88-cd93-40b6-a0be-f93210bc54ab) diff --git a/Calculators/Typing-Speed-Calculator/assets/bg.jpg b/Calculators/Typing-Speed-Calculator/assets/bg.jpg new file mode 100644 index 000000000..22135b25e Binary files /dev/null and b/Calculators/Typing-Speed-Calculator/assets/bg.jpg differ diff --git a/Calculators/Typing-Speed-Calculator/assets/preview.png b/Calculators/Typing-Speed-Calculator/assets/preview.png new file mode 100644 index 000000000..f3ce8dd56 Binary files /dev/null and b/Calculators/Typing-Speed-Calculator/assets/preview.png differ diff --git a/Calculators/Typing-Speed-Calculator/index.html b/Calculators/Typing-Speed-Calculator/index.html new file mode 100644 index 000000000..27d7ad605 --- /dev/null +++ b/Calculators/Typing-Speed-Calculator/index.html @@ -0,0 +1,25 @@ + + + + + + + Typing Speed Test + + + + + +

Typing Speed Test

+
+

Type the following text:

+

+
+ + +
+

+
+ + + \ No newline at end of file diff --git a/Calculators/Typing-Speed-Calculator/script.js b/Calculators/Typing-Speed-Calculator/script.js new file mode 100644 index 000000000..3054d0b2e --- /dev/null +++ b/Calculators/Typing-Speed-Calculator/script.js @@ -0,0 +1,60 @@ +let startTime; +let endTime; +let typedText = ''; +const sentences = [ + 'The quick brown fox jumps over the lazy dog', + 'The five boxing wizards jump quickly', + 'Pack my box with five dozen milk jugs', + 'How jumping frogs can level six piqued gymnasts', + 'The quick onyx goblin jumps over the lazy dwarf', +]; + + +function getRandomSentence() { + let randomIndex = Math.floor(Math.random() * sentences.length); + document.getElementById('text-to-type').textContent = sentences[randomIndex]; +} + +function startTimer() { + startTime = new Date(); +} + +function stopTimer() { + endTime = new Date(); + calculateSpeed(); +} + +function checkInput() { + if (!startTime) { + startTimer(); + } + typedText = document.getElementById('user-input').value; + let textToType = document.getElementById('text-to-type').textContent; + if (typedText === textToType) { + stopTimer(); + } +} + +function calculateSpeed() { + let elapsedTime = (endTime - startTime) / 1000; // Convert to seconds + let words = typedText.trim().split(/\s+/).length; + let characters = typedText.length; + let wordsPerSec = words / elapsedTime; + let charactersPerSec = characters / elapsedTime; + displaySpeed(wordsPerSec, charactersPerSec); +} + +function displaySpeed(wordsPerSec, charactersPerSec) { + let resultElement = document.getElementById('speed-result'); + resultElement.innerHTML = `Your typing speed is: i) ${wordsPerSec.toFixed(2)} words/sec + ii) ${charactersPerSec.toFixed(2)} characters/sec.`; +} + +function resetInput() { + document.getElementById('user-input').value = ''; + document.getElementById('speed-result').innerHTML = ''; + startTime = null; + endTime = null; + typedText = ''; + getRandomSentence(); +} \ No newline at end of file diff --git a/Calculators/Typing-Speed-Calculator/style.css b/Calculators/Typing-Speed-Calculator/style.css new file mode 100644 index 000000000..7e457c85f --- /dev/null +++ b/Calculators/Typing-Speed-Calculator/style.css @@ -0,0 +1,73 @@ +@import url('https://fonts.googleapis.com/css2?family=ABeeZee&display=swap'); + +body { + font-family: 'ABeeZee', sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + background-image: url('./assets/bg.jpg'); + background-position: 30% 30%; + background-repeat: no-repeat; + background-size: cover; +} +h1{ + color: #fff; + text-align: center; + font-size: 3rem; + margin-bottom: 20px; + +} +#typing-box { + background-color: #fff; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + padding: 20px; + max-width: 500px; + width: 100%; + text-align: center; +} + +#text-to-type { + font-size: 18px; + margin-bottom: 20px; +} + +#user-input { + padding: 10px; + margin-bottom: 20px; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 16px; + text-align: center; +} + +button { + background-color: #19238d; + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #19238d; +} + +#speed-result { + font-size: 16px; + margin-top: 20px; +} + +.form-wrapper{ + display: flex; + flex-direction: column; + gap: 10px; +} \ No newline at end of file diff --git a/index.html b/index.html index 35daa5b6a..67f3ade78 100644 --- a/index.html +++ b/index.html @@ -1650,6 +1650,20 @@

Checks the number is disarium or not and finds disarium numbers in a range.< +
+
+

Typing Speed Calculator

+

Calculates the typing speed in two different units.

+
+ + + + + Source Code + +
+
+