🤖 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">
|
||||
<title>Interactive Timer Game</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Welcome to the Interactive Timer Game</h1>
|
||||
<p>Try to tap the timer button consistently to play the game.</p>
|
||||
</body>
|
||||
<body>
|
||||
<h1>Welcome to the Interactive Timer Game</h1>
|
||||
<p>Try to tap the timer button consistently to play the game.</p>
|
||||
<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>
|
||||
|
|
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