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

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.
+
+Live Demo
+Source
+ 
+
+
+
 
 
 (back to top)

Source-Code/TypingSpeedTest/index.html

@@ -0,0 +1,25 @@
+
+
+
+  
+  
+  Typing Speed Test
+  
+
+
+  
+    Typing Speed Test
+    
+      Click "Start" to begin!
+    
+    
+    
+      WPM: 0
+      Accuracy: 100%
+    
+    Start
+  
+
+  
+
+

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);

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