-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSleepCalculator.html
80 lines (75 loc) · 2.09 KB
/
SleepCalculator.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
<!DOCTYPE html>
<html>
<head>
<title>Sleep Calculator</title>
</head>
<body>
<h1>Sleep Calculator</h1>
<form>
<label for="bedtime">Bedtime:</label>
<input type="time" id="bedtime" required><br><br>
<label for="waketime">Wake-up Time:</label>
<input type="time" id="waketime" required><br><br>
<input type="submit" value="Calculate">
</form>
<p id="output"></p>
<script>
const form = document.querySelector('form');
const output = document.querySelector('#output');
form.addEventListener('submit', event => {
event.preventDefault();
const bedtime = new Date(`01/01/2000 ${form.bedtime.value}`);
const waketime = new Date(`01/01/2000 ${form.waketime.value}`);
if (waketime < bedtime) {
waketime.setDate(waketime.getDate() + 1);
}
const sleepTime = waketime - bedtime;
const hours = Math.floor(sleepTime / 1000 / 60 / 60);
const minutes = Math.floor((sleepTime - (hours * 1000 * 60 * 60)) / 1000 / 60);
output.textContent = `You slept for ${hours} hours and ${minutes} minutes.`;
});
</script>
</body>
<style>
table {
border-collapse: collapse;
width: 30%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
<table>
<tr>
<th> Age Range </th>
<th> Recommended Daily Sleep </th>
</tr>
<tr>
<td> Infant (4 - 12 months ) </td>
<td> 12 - 16 hours (including naps) </td>
</tr>
<tr>
<td> Toddler (1 - 2 years ) </td>
<td> 11 - 14 hours (including naps) </td>
</tr>
<tr>
<td> Preschool (3 - 5 years ) </td>
<td> 10 - 13 hours (including naps) </td> </tr>
<tr>
<td> School-age (6 - 12 years ) </td>
<td> 9 - 12 hours </td>
</tr>
<tr>
<td> Teens (13 - 18 years ) </td>
<td> 8 - 10 hours </td>
</tr>
<tr>
<td> Adult (18 years and older ) </td>
<td> 7 or more hours </td>
</tr>
</table>
</html>