From 3bf77ef96df42d5c4f09bf206e287622f7878454 Mon Sep 17 00:00:00 2001 From: Jason McPheron Date: Sun, 21 Apr 2024 09:41:13 -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=20timer=20g?= =?UTF-8?q?ame=20functionality=20to=20the=20app?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 14 ++++++++++---- public/script.js | 27 +++++++++++++++++++++++++++ public/styles.css | 24 ++++++++++++++++++++++++ 3 files changed, 61 insertions(+), 4 deletions(-) create mode 100644 public/script.js create mode 100644 public/styles.css diff --git a/public/index.html b/public/index.html index ca89885..d113fd9 100644 --- a/public/index.html +++ b/public/index.html @@ -5,8 +5,14 @@ Interactive Timer Game - -

Welcome to the Interactive Timer Game

-

Try to tap the timer button consistently to play the game.

- + +

Welcome to the Interactive Timer Game

+

Try to tap the timer button consistently to play the game.

+ +
+

Timer History

+ +
+ + diff --git a/public/script.js b/public/script.js new file mode 100644 index 0000000..32dd6e8 --- /dev/null +++ b/public/script.js @@ -0,0 +1,27 @@ +let timerRunning = false; +let startTime; +let elapsedTime = 0; +let timerHistory = []; + +const timerButton = document.getElementById('timerButton'); +const historyList = document.getElementById('historyList'); + +timerButton.addEventListener('click', function() { + if (!timerRunning) { + startTime = Date.now() - elapsedTime; + timerRunning = true; + timerButton.textContent = 'Stop Timer'; + } else { + elapsedTime = Date.now() - startTime; + timerRunning = false; + timerButton.textContent = 'Start Timer'; + recordTime(elapsedTime); + } +}); + +function recordTime(time) { + timerHistory.push(time); + const newTime = document.createElement('li'); + newTime.textContent = `Time: ${time} ms`; + historyList.appendChild(newTime); +} diff --git a/public/styles.css b/public/styles.css new file mode 100644 index 0000000..dd84c60 --- /dev/null +++ b/public/styles.css @@ -0,0 +1,24 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f9; + color: #333; + text-align: center; + padding: 20px; +} + +#timerButton { + background-color: #4CAF50; + color: white; + border: none; + padding: 10px 20px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 10px; + cursor: pointer; +} + +#timerHistory { + margin-top: 20px; +}