-
Notifications
You must be signed in to change notification settings - Fork 0
/
tobdeleted.html
59 lines (56 loc) · 1.56 KB
/
tobdeleted.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
<title>Timer App</title>
<style>
#timers {
display: flex;
flex-wrap: wrap;
}
.timer {
margin: 10px;
border: 1px solid #ccc;
padding: 10px;
width: 200px;
}
</style>
</head>
<body>
<h1>Timer App</h1>
<div>
<label for="duration">Select Timer Duration:</label>
<select id="duration">
<option value="5">5 seconds</option>
<option value="10">10 seconds</option>
<option value="15">15 seconds</option>
<option value="1800">30 minutes</option>
</select>
<button onclick="createTimer()">Create Timer</button>
</div>
<div id="timers">
<!-- Timers will be displayed here -->
</div>
<script>
function createTimer() {
const duration = parseInt(document.getElementById("duration").value);
const timerElement = document.createElement("div");
timerElement.className = "timer";
document.getElementById("timers").appendChild(timerElement);
let seconds = duration;
timerElement.innerText = `${seconds} seconds`;
const intervalId = setInterval(() => {
seconds--;
timerElement.innerText = `${seconds} seconds`;
if (seconds <= 0) {
clearInterval(intervalId);
timerElement.innerText = "Time's up!";
timerElement.style.backgroundColor = "red";
setTimeout(() => {
timerElement.remove();
}, 2000); // Remove the timer element after 2 seconds
}
}, 1000);
}
</script>
</body>
</html>