From 74ff6a073fca5ec181381c59b9be368f2b92a0c3 Mon Sep 17 00:00:00 2001
From: Mohit Mehtre <mohitmehtre@gmail.com>
Date: Mon, 13 Oct 2025 23:42:29 +0530
Subject: [PATCH] Add reset button, WPM calculation, and date-time display

---
 4-typing-game/solution/index.css  | 22 ++++++++++++++++++++++
 4-typing-game/solution/index.html | 31 +++++++++++++++++--------------
 4-typing-game/solution/index.js   | 22 ++++++++++++++++++++--
 3 files changed, 59 insertions(+), 16 deletions(-)
diff --git a/4-typing-game/solution/index.css b/4-typing-game/solution/index.css
index 5a33a101..f9bdf7f2 100644
--- a/4-typing-game/solution/index.css
+++ b/4-typing-game/solution/index.css
@@ -154,3 +154,25 @@ button#start i {
     width: 100%;
   }
 }
+
+
+#reset {
+  color: white;
+  background: linear-gradient(to right, #ff7043, #e64a19);
+  border: none;
+  padding: 10px 20px;
+  border-radius: 12px;
+  font-size: 1rem;
+  cursor: pointer;
+  margin-top: 1rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: transform 0.2s ease, box-shadow 0.3s ease;
+}
+
+
+#reset:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+}
diff --git a/4-typing-game/solution/index.html b/4-typing-game/solution/index.html
index e12d7681..b07b0d42 100644
--- a/4-typing-game/solution/index.html
+++ b/4-typing-game/solution/index.html
@@ -42,13 +42,23 @@
         <h1>
             <i class="fas fa-keyboard"></i> Practice your typing
         </h1>
+
+		<div id="datetime">
+			<i class="fas fa-calendar-day"></i>
+			<span id="current-date"></span>
+			&nbsp;|&nbsp;
+			<i class="fas fa-clock"></i>
+			<span id="current-time"></span>
+		</div>
+
+
         <div>
             <i class="fas fa-info-circle"></i>
             Click start to have a quote displayed. Type the quote as fast as you can!
         </div>
 
         <p id="quote"></p>
-        <p id="message"></p>
+        <p id="message" aria-live="polite"></p>
         <div>
             <label for="typed-value" class="hidden-label">Current word</label>
             <input type="text" aria-label="current word" id="typed-value" placeholder="Type here..." />
@@ -59,21 +69,14 @@
                 <i class="fas fa-play"></i> Start
             </button>
         </div>
+		<div>
+			<button id="reset" type="button" style="display: none;" aria-label="Reset the typing game">
+				<i class="fas fa-sync"></i> Reset
+			</button>
+		</div>
+
         <script src="./index.js"></script>
 				<!-- ...existing code... -->
-		<body>
-			<h1>
-				<i class="fas fa-keyboard"></i> Practice your typing
-			</h1>
-			<div id="datetime">
-				<i class="fas fa-calendar-day"></i>
-				<span id="current-date"></span>
-				&nbsp;|&nbsp;
-				<i class="fas fa-clock"></i>
-				<span id="current-time"></span>
-			</div>
-			<!-- ...existing code... -->
-		</body>
 		<!-- ...existing code... -->
 		 <script>	
 						// ...existing code...
diff --git a/4-typing-game/solution/index.js b/4-typing-game/solution/index.js
index 55a4f392..27dc02e3 100644
--- a/4-typing-game/solution/index.js
+++ b/4-typing-game/solution/index.js
@@ -24,7 +24,7 @@ const startButton = document.querySelector("#start");
 
 // Messages system
 const messages = {
-  success: (seconds) => `🎉 Congratulations! You finished in ${seconds.toFixed(2)} seconds.`,
+  success: (seconds, wpm) => `🎉 Congratulations! You finished in ${seconds.toFixed(2)} seconds (${wpm} WPM).`,
   error: "⚠️ Oops! There's a mistake.",
   start: "⌨️ Start typing to begin the game."
 };
@@ -69,8 +69,14 @@ const handleTyping = () => {
   if (typedValue === currentWord && wordIndex === words.length - 1) {
     // Game finished
     const elapsedTime = (Date.now() - startTime) / 1000;
-    messageElement.textContent = messages.success(elapsedTime);
+    const elapsedMinutes = elapsedTime / 60;
+    const wordCount = words.length;
+    const wpm = (wordCount / elapsedMinutes).toFixed(2);
+
+    messageElement.textContent = messages.success(elapsedTime, wpm);
     typedValueElement.disabled = true;
+    document.getElementById("reset").style.display = "inline-block";
+    document.getElementById("start").style.display = "none";
   } else if (typedValue.endsWith(" ") && typedValue.trim() === currentWord) {
     // Word completed
     typedValueElement.value = "";
@@ -92,3 +98,15 @@ typedValueElement.addEventListener("input", handleTyping);
 
 // Default state
 messageElement.textContent = "👉 Click Start to begin!";
+
+const resetButton = document.getElementById("reset");
+
+resetButton.addEventListener("click", () => {
+  // Reset game state
+  typedValueElement.disabled = false;
+  typedValueElement.value = "";
+  messageElement.textContent = "👉 Click Start to begin!";
+  quoteElement.innerHTML = "";
+  startButton.style.display = "inline-block";
+  resetButton.style.display = "none";
+});
