microsoft · krrahulcse · Oct 5, 2025
diff --git a/gameResetFunctionality/game.css b/gameResetFunctionality/game.css
@@ -0,0 +1,82 @@
+body {
+    background-color: #34495e;
+    color: #ecf0f1;
+    font-family: 'Courier New', Courier, monospace;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    text-align: center;
+  }
+  .container {
+    background-color: #2c3e50;
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+    width: 80%;
+    max-width: 700px;
+  }
+  h1 {
+    color: #3498db;
+  }
+  #quote-display {
+    font-size: 1.5rem;
+    margin-bottom: 20px;
+    line-height: 1.6;
+  }
+  .word-correct {
+    color: #2ecc71; /* Green for correct */
+  }
+  .word-incorrect {
+    color: #e74c3c; /* Red for incorrect */
+    text-decoration: underline;
+  }
+  .highlight {
+    background-color: #f1c40f;
+    color: #2c3e50;
+    border-radius: 4px;
+    padding: 2px 4px;
+  }
+  #typed-value {
+    width: 100%;
+    padding: 10px;
+    font-size: 1.2rem;
+    border: 2px solid #3498db;
+    border-radius: 5px;
+    background-color: #ecf0f1;
+    color: #2c3e50;
+    box-sizing: border-box;
+  }
+  #typed-value:disabled {
+    background-color: #95a5a6;
+  }
+  #message {
+    margin-top: 20px;
+    font-size: 1.2rem;
+    height: 20px; /* Reserve space to prevent layout shift */
+  }
+  /* --- MODIFIED ---: Style for the main action button */
+  #action-button {
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    font-size: 1.2rem;
+    cursor: pointer;
+    margin-top: 20px;
+    transition: background-color 0.3s;
+  }
+  /* --- NEW ---: Classes for different button states */
+  .btn-start, .btn-success {
+    background-color: #2ecc71; /* Green for start and success */
+  }
+  .btn-start:hover, .btn-success:hover {
+    background-color: #27ae60;
+  }
+  .btn-reset {
+    background-color: #e67e22; /* Orange for reset */
+  }
+  .btn-reset:hover {
+    background-color: #d35400;
+  }
diff --git a/gameResetFunctionality/game.html b/gameResetFunctionality/game.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Game</title>
+    <link rel="stylesheet" href="./game.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Typing Speed Test</h1>
+        <div id="quote-display">Click "Start" to begin.</div>
+        <input type="text" id="typed-value" disabled>
+        <div id="message"></div>
+
+        <!-- --- MODIFIED ---: The button now has a single ID and will be managed by JS -->
+        <button id="action-button" class="btn-start">Start Game</button>
+
+      </div>
+
+      <script src="./game.js"></script>
+</body>
+</html>
diff --git a/gameResetFunctionality/game.js b/gameResetFunctionality/game.js
@@ -0,0 +1,84 @@
+// DOM Elements
+const quoteDisplayElement = document.getElementById('quote-display');
+const typedValueElement = document.getElementById('typed-value');
+const messageElement = document.getElementById('message');
+const actionButton = document.getElementById('action-button');
+
+// Game Variables
+const quotes = [
+  'The quick brown fox jumps over the lazy dog.',
+  'Technology is best when it brings people together.',
+  'It is not the mountain we conquer but ourselves.',
+  'To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.'
+];
+const messages = {
+  start: 'Type the quote above...',
+  success: (seconds) => `🎉 CONGRATULATIONS! You finished in ${seconds} seconds.`,
+  typing: 'Keep going...'
+};
+let words = [];
+let wordIndex = 0;
+let startTime = Date.now();
+
+// --- MODIFIED ---: The startGame function
+const startGame = () => {
+  const quote = quotes[Math.floor(Math.random() * quotes.length)];
+  words = quote.split(' ');
+  wordIndex = 0;
+
+  const spanWords = words.map(word => `<span>${word} </span>`);
+  quoteDisplayElement.innerHTML = spanWords.join('');
+  quoteDisplayElement.childNodes[0].className = 'highlight';
+
+  messageElement.textContent = messages.start;
+  typedValueElement.value = '';
+  typedValueElement.disabled = false;
+  typedValueElement.focus();
+
+  // --- MODIFIED ---: Update the button to be a 'Reset' button
+  actionButton.textContent = 'Reset';
+  actionButton.className = 'btn-reset';
+
+  startTime = new Date().getTime();
+};
+
+// Main Game Logic
+typedValueElement.addEventListener('input', () => {
+  const currentWord = words[wordIndex];
+  const typedValue = typedValueElement.value;
+
+  if (typedValue === currentWord && wordIndex === words.length - 1) {
+    // --- THIS IS THE SUCCESS CONDITION BLOCK ---
+    const elapsedTime = new Date().getTime() - startTime;
+    const seconds = (elapsedTime / 1000).toFixed(2);
+    messageElement.textContent = messages.success(seconds);
+
+    typedValueElement.disabled = true; // Disable input as before
+
+    // --- MODIFIED ---: Update the button to be a 'Play Again' button
+    actionButton.textContent = 'Play Again';
+    actionButton.className = 'btn-success';
+    actionButton.focus();
+
+  } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
+    // Word typed correctly, move to the next word
+    typedValueElement.value = '';
+    wordIndex++;
+
+    // Reset highlighting
+    Array.from(quoteDisplayElement.childNodes).forEach(child => (child.className = ''));
+    quoteDisplayElement.childNodes[wordIndex].className = 'highlight';
+
+  } else if (currentWord.startsWith(typedValue)) {
+    // Correctly typing the current word
+    quoteDisplayElement.childNodes[wordIndex].className = 'highlight';
+    messageElement.textContent = messages.typing;
+  } else {
+    // Incorrect typing
+    quoteDisplayElement.childNodes[wordIndex].className = 'highlight word-incorrect';
+    messageElement.textContent = messages.typing;
+  }
+});
+
+// --- MODIFIED ---: Event listener for the single action button
+actionButton.addEventListener('click', startGame);