Add reset button, WPM calculation, and date-time display

2 months ago · 74ff6a073f
parent c64300b561
commit 74ff6a073f
3 changed files with 59 additions and 16 deletions
--- 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);
+}
--- 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...
--- 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";
+});