-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
151 lines (142 loc) · 4.4 KB
/
index.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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
rel="stylesheet"
/>
<script defer src="https://cdn.tailwindcss.com"></script>
<title>Countdown Timer</title>
<style>
body {
font-family: "Poppins", sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
</style>
</head>
<body class="flex flex-col gap-5 items-center justify-center min-h-[100vh]">
<h3 class="text-6xl font-semibold text-black items-center">
Learn JAVA<span class="text-yellow-400">SCRIPT</span> in
</h3>
<div
class="text-5xl font-medium text-red-400 transition-all duration-300"
id="timer"
>
00:00:00
</div>
<div id="controls" class="flex flex-row gap-4 items-center">
<button
class="text-white capitalize font-medium font-base active:scale-[0.97] transition-all duration-300 bg-blue-500 w-[100px] py-3.5 rounded"
onclick="startTimer()"
>
Start/play
</button>
<button
class="text-white capitalize font-medium font-base active:scale-[0.97] transition-all duration-300 bg-yellow-500 w-[100px] py-3.5 rounded"
onclick="pauseTimer()"
>
Pause
</button>
<button
class="text-white capitalize font-medium font-base active:scale-[0.97] transition-all duration-300 bg-red-500 w-[100px] py-3.5 rounded"
onclick="resetTimer()"
>
Reset
</button>
<button
class="text-white capitalize font-medium font-base active:scale-[0.97] transition-all duration-300 bg-green-500 w-[100px] py-3.5 rounded"
onclick="addTime(60)"
<!--
Add
1
minute
to
the
timer
--
>
> +1 Min
</button>
<button
class="text-white capitalize font-medium font-base active:scale-[0.97] transition-all duration-300 bg-purple-500 w-[100px] py-3.5 rounded"
onclick="subtractTime(60)"
<!--
Subtract
1
minute
from
the
timer
--
>
> -1 Min
</button>
</div>
<script>
let timer;
let timeRemaining =
parseInt(localStorage.getItem("timeRemaining")) || 36 * 60 * 60; // 36 hours in seconds
let isPaused = true;
function startTimer() {
if (isPaused) {
isPaused = false;
timer = setInterval(updateTimer, 1000);
}
}
function pauseTimer() {
clearInterval(timer);
isPaused = true;
localStorage.setItem("timeRemaining", timeRemaining.toString());
}
function resetTimer() {
clearInterval(timer);
isPaused = true;
timeRemaining = 36 * 60 * 60; // Reset to 36 hours in seconds
localStorage.setItem("timeRemaining", timeRemaining.toString());
updateTimerDisplay();
}
function addTime(seconds) {
timeRemaining += seconds;
updateTimerDisplay();
}
function subtractTime(seconds) {
if (timeRemaining >= seconds) {
timeRemaining -= seconds;
} else {
timeRemaining = 0;
}
updateTimerDisplay();
}
function updateTimer() {
if (timeRemaining > 0) {
timeRemaining--;
localStorage.setItem("timeRemaining", timeRemaining.toString());
updateTimerDisplay();
} else {
clearInterval(timer);
alert("Countdown finished!");
}
}
function updateTimerDisplay() {
const hours = Math.floor(timeRemaining / 3600);
const minutes = Math.floor((timeRemaining % 3600) / 60);
const seconds = timeRemaining % 60;
document.getElementById("timer").textContent = `${String(
hours
).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(
seconds
).padStart(2, "0")}`;
}
// Initial display
updateTimerDisplay();
</script>
<!-- test js file -->
<script src="script.js" type="text/javascript"></script>
</body>
</html>