🤖 Plandex → apply pending changes

✏️  Add 2-second challenge feature to timer game

public/index.html

@@ -15,6 +15,11 @@
             <h2>Timer History 📜</h2>
             <ul id="historyList"></ul>
         </div>
+        <button id="challengeButton">⏱️ 2-Second Challenge ⏱️</button>
+        <div id="challengeResults">
+            <h2>Challenge Results 🎯</h2>
+            <ul id="resultsList"></ul>
+        </div>
     </div>
     <script src="script.js"></script>
     </body>

public/script.js

@@ -2,10 +2,13 @@ let timerRunning = false;
 let startTime;
 let elapsedTime = 0;
 let timerHistory = [];
+let challengeRunning = false;
+let challengeStartTime;
+let challengeTimes = [];
 
 const timerButton = document.getElementById('timerButton');
 const historyList = document.getElementById('historyList');
-
+const challengeButton = document.getElementById('challengeButton');
 timerButton.addEventListener('click', function() {
     if (!timerRunning) {
         startTime = Date.now() - elapsedTime;
@@ -19,9 +22,30 @@ timerButton.addEventListener('click', function() {
     }
 });
 
+challengeButton.addEventListener('click', function() {
+    if (!challengeRunning) {
+        challengeStartTime = Date.now();
+        challengeRunning = true;
+        challengeButton.textContent = 'Tap at 2 seconds';
+    } else {
+        let tapTime = Date.now();
+        let interval = tapTime - challengeStartTime;
+        challengeTimes.push(interval);
+        challengeRunning = false;
+        challengeButton.textContent = '⏱️ 2-Second Challenge ⏱️';
+        recordChallengeTime(interval);
+    }
+});
+
 function recordTime(time) {
     timerHistory.push(time);
     const newTime = document.createElement('li');
     newTime.textContent = `Time: ${time} ms`;
     historyList.appendChild(newTime);
 }
+
+function recordChallengeTime(time) {
+    const newTime = document.createElement('li');
+    newTime.textContent = `Attempt: ${time} ms - ${Math.abs(2000 - time)} ms off`;
+    resultsList.appendChild(newTime);
+}

public/styles.css

@@ -1 +1 @@
-body {\n    font-family: 'Papyrus', sans-serif;\n    background-color: #ffccf9; /* Light pink */\n    color: #006400; /* Dark green */\n    text-align: center;\n    padding: 20px;\n}\n.main-content {\n    margin: auto;\n    width: 500px;\n    padding: 20px;\n    border: 2px dashed #ff4500; /* Orange red */\n    border-radius: 10px;\n    background-color: #ffffe0; /* Light yellow */\n}\n#timerButton {\n    background-color: #32cd32; /* Lime green */\n    color: #ff6347; /* Tomato */\n    border: 2px solid #9400d3; /* Dark violet */\n    padding: 10px 20px;\n    text-align: center;\n    text-decoration: none;\n    display: inline-block;\n    font-size: 16px;\n    margin: 10px;\n    cursor: pointer;\n    border-radius: 8px;\n}\n#timerHistory {\n    margin-top: 20px;\n    color: #000080; /* Navy */\n}
+#timerButton, #challengeButton {\n    background-color: #32cd32; /* Lime green */\n    color: #ff6347; /* Tomato */\n    border: 2px solid #9400d3; /* Dark violet */\n    padding: 10px 20px;\n    text-align: center;\n    text-decoration: none;\n    display: inline-block;\n    font-size: 16px;\n    margin: 10px;\n    cursor: pointer;\n    border-radius: 8px;\n}\n#timerHistory, #challengeResults {\n    margin-top: 20px;\n    color: #000080; /* Navy */\n}