-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathHome Timer.html
134 lines (116 loc) · 4.33 KB
/
Home Timer.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap');
body {
background-color: black;
color: white;
font-family: 'Lato', sans-serif;
text-align: center;
position: relative;
height: 100vh;
margin: 0;
transition: all 0.3s ease-in-out;
}
#header {
font-size: 24px;
margin-top: 1em;
}
#customTime {
font-family: 'Lato', sans-serif;
padding: 10px;
border: 1px solid white;
background-color: transparent;
color: white;
margin-top: 1em;
}
#startButton, #stopButton {
background-color: transparent;
color: white;
border: none;
cursor: pointer;
padding: 10px 20px;
font-size: 16px;
}
#inputSection {
display: block;
margin-top: 1em;
}
#countdownSection, #stopButton {
display: none; /* Hide by default */
}
#stopButton {
position: absolute;
right: 20px;
bottom: 20px;
}
#feedback {
color: red;
margin-top: 10px;
display: none; /* Hide by default, shown on invalid input */
}
</style>
<link rel="shortcut icon" type="image/x-icon" href="/Users/name/Documents/favicon.ico">
</head>
<body>
<div id="header">It's time to relax...</div>
<br> <!-- Line break added here -->
<div id="inputSection">
<input type="number" id="customTime" placeholder="Enter relaxation time">
<button id="startButton" onclick="startCountdown()">Start</button>
<div id="feedback"></div>
</div>
<div id="countdownSection">
<!-- Countdown display goes here -->
</div>
<button id="stopButton" onclick="stopCountdown()">Stop</button>
<script>
const countdownSection = document.getElementById("countdownSection");
const customTimeInput = document.getElementById("customTime");
const inputSection = document.getElementById("inputSection");
const stopButton = document.getElementById("stopButton");
const feedback = document.getElementById('feedback');
let intervalId = null;
function startCountdown() {
const relaxationTimeMinutes = parseInt(customTimeInput.value, 10);
if (isNaN(relaxationTimeMinutes) || relaxationTimeMinutes <= 0) {
feedback.textContent = "Please enter a valid time in minutes.";
feedback.style.display = 'block';
return;
} else {
feedback.style.display = 'none';
}
inputSection.style.display = 'none';
countdownSection.style.display = 'block';
stopButton.style.display = 'block';
const endTime = Date.now() + relaxationTimeMinutes * 60 * 1000;
function updateCountdown() {
const currentTime = Date.now();
const remainingTime = endTime - currentTime;
if (remainingTime <= 0) {
countdownSection.textContent = "Time's up!";
clearInterval(intervalId);
stopCountdown();
return;
}
const minutes = Math.floor(remainingTime / 60000);
const seconds = Math.floor((remainingTime % 60000) / 1000);
countdownSection.textContent = `Time remaining: ${minutes} min ${seconds} sec`;
}
updateCountdown();
intervalId = setInterval(updateCountdown, 1000);
}
function stopCountdown() {
clearInterval(intervalId);
countdownSection.style.display = 'none';
stopButton.style.display = 'none';
inputSection.style.display = 'block';
customTimeInput.value = '';
}
</script>
</body>
</html>