🤖 Plandex → apply pending changes
✏️ Add 2-second challenge feature to timer game
This commit is contained in:
parent
e31ad10ba6
commit
9e253a1cfb
3 changed files with 31 additions and 2 deletions
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
}
|
|
@ -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}
|
Loading…
Reference in a new issue