🤖 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>
|
<h2>Timer History 📜</h2>
|
||||||
<ul id="historyList"></ul>
|
<ul id="historyList"></ul>
|
||||||
</div>
|
</div>
|
||||||
|
<button id="challengeButton">⏱️ 2-Second Challenge ⏱️</button>
|
||||||
|
<div id="challengeResults">
|
||||||
|
<h2>Challenge Results 🎯</h2>
|
||||||
|
<ul id="resultsList"></ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -2,10 +2,13 @@ let timerRunning = false;
|
||||||
let startTime;
|
let startTime;
|
||||||
let elapsedTime = 0;
|
let elapsedTime = 0;
|
||||||
let timerHistory = [];
|
let timerHistory = [];
|
||||||
|
let challengeRunning = false;
|
||||||
|
let challengeStartTime;
|
||||||
|
let challengeTimes = [];
|
||||||
|
|
||||||
const timerButton = document.getElementById('timerButton');
|
const timerButton = document.getElementById('timerButton');
|
||||||
const historyList = document.getElementById('historyList');
|
const historyList = document.getElementById('historyList');
|
||||||
|
const challengeButton = document.getElementById('challengeButton');
|
||||||
timerButton.addEventListener('click', function() {
|
timerButton.addEventListener('click', function() {
|
||||||
if (!timerRunning) {
|
if (!timerRunning) {
|
||||||
startTime = Date.now() - elapsedTime;
|
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) {
|
function recordTime(time) {
|
||||||
timerHistory.push(time);
|
timerHistory.push(time);
|
||||||
const newTime = document.createElement('li');
|
const newTime = document.createElement('li');
|
||||||
newTime.textContent = `Time: ${time} ms`;
|
newTime.textContent = `Time: ${time} ms`;
|
||||||
historyList.appendChild(newTime);
|
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