From 9e253a1cfb7274fde52c1595f2dd8558c75c57a0 Mon Sep 17 00:00:00 2001
From: Jason McPheron <jason.mcpheron@gmail.com>
Date: Sun, 21 Apr 2024 10:00:20 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20Plandex=20=E2=86=92=20apply=20pe?=
 =?UTF-8?q?nding=20changes=20=20=20=E2=9C=8F=EF=B8=8F=20=20Add=202-second?=
 =?UTF-8?q?=20challenge=20feature=20to=20timer=20game?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html |  5 +++++
 public/script.js  | 26 +++++++++++++++++++++++++-
 public/styles.css |  2 +-
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index fe52e71..eb9139e 100644
--- a/public/index.html
+++ b/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>
diff --git a/public/script.js b/public/script.js
index 32dd6e8..d4c6185 100644
--- a/public/script.js
+++ b/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);
+}
\ No newline at end of file
diff --git a/public/styles.css b/public/styles.css
index b873c6d..14514e2 100644
--- a/public/styles.css
+++ b/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}
\ No newline at end of file
+#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}
\ No newline at end of file