🤖 Plandex → apply pending changes
✏️ Add timer game functionality to the app
This commit is contained in:
parent
ca49b0546d
commit
3bf77ef96d
3 changed files with 61 additions and 4 deletions
|
@ -5,8 +5,14 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Interactive Timer Game</title>
|
<title>Interactive Timer Game</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Welcome to the Interactive Timer Game</h1>
|
<h1>Welcome to the Interactive Timer Game</h1>
|
||||||
<p>Try to tap the timer button consistently to play the game.</p>
|
<p>Try to tap the timer button consistently to play the game.</p>
|
||||||
</body>
|
<button id="timerButton">Start/Stop Timer</button>
|
||||||
|
<div id="timerHistory">
|
||||||
|
<h2>Timer History</h2>
|
||||||
|
<ul id="historyList"></ul>
|
||||||
|
</div>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
27
public/script.js
Normal file
27
public/script.js
Normal file
|
@ -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);
|
||||||
|
}
|
24
public/styles.css
Normal file
24
public/styles.css
Normal file
|
@ -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;
|
||||||
|
}
|
Loading…
Reference in a new issue