-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (99 loc) · 3.74 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
<html>
<head>
<title>Sleep Debt Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<center>
<h1>Sleep Debt Calculator</h1>
<p id="description">
Sleep debt is a condition that if not taken seriously, can impact your mental and physical
health. When the hours of sleep you are getting are below the amount of sleep your
body actually needs, you accumulate a sleep deficit, aka sleep debt. Similarly, if you
oversleep, you can also build up your sleep debt.<br/><br/>
Use this calculator to determine if you are getting the right amount of sleep during the week or if
you have a sleep debt.
</p>
<table id="idealSleepTable">
<tr>
<td>How many hours of sleep do you <b>ideally</b> want every night?</td>
<td><input type="number" id="idealSleepHours"></td>
</table>
</br>
<p>How many hours of sleep do you <b>actually</b> get every night?</p>
<form>
<table>
<tr>
<td>Sunday Night</td>
<td><input type="number" id="sundaySleepHours"></td>
</tr>
<tr>
<td>Monday Night</td>
<td><input type="number" id="mondaySleepHours"></td>
</tr>
<tr>
<td>Tuesday Night</td>
<td><input type="number" id="tuesdaySleepHours"></td>
</tr>
<tr>
<td>Wednesday Night</td>
<td><input type="number" id="wednesdaySleepHours"></td>
</tr>
<tr>
<td>Thursday Night</td>
<td><input type="number" id="thursdaySleepHours"></td>
</tr>
<tr>
<td>Friday Night</td>
<td><input type="number" id="fridaySleepHours"></td>
</tr>
<tr>
<td>Saturday Night</td>
<td><input type="number" id="saturdaySleepHours"></td>
</tr>
</table>
</br>
<!-- return false prevents the form from "submitting" and refreshing the page -->
<input type="submit" value="Submit" onClick="calculateSleepDebt(); return false;">
</form>
<p id="testBox"></p>
</center>
<script type="text/javascript">
const calculateSleepDebt = () => {
// Get daily sleep hours
let sundaySleepHours = document.getElementById("sundaySleepHours").value;
let mondaySleepHours = document.getElementById("mondaySleepHours").value;
let tuesdaySleepHours = document.getElementById("tuesdaySleepHours").value;
let wednesdaySleepHours = document.getElementById("wednesdaySleepHours").value;
let thursdaySleepHours = document.getElementById("thursdaySleepHours").value;
let fridaySleepHours = document.getElementById("fridaySleepHours").value;
let saturdaySleepHours = document.getElementById("saturdaySleepHours").value;
// Test to make sure data capture works
// document.getElementById("testBox").innerHTML = sundaySleepHours;
// Add up all the daily sleep hours into one total
// Put a + before each var so it is treated as an int and not a string
const actualSleep = +sundaySleepHours + +mondaySleepHours + +tuesdaySleepHours + +wednesdaySleepHours + +thursdaySleepHours + +fridaySleepHours + +saturdaySleepHours;
// Test to make sure actualSleepHours prints
// document.getElementById("testBox").innerHTML = actualSleep;
// Get the ideal sleep hours from the input
let idealSleepHours = document.getElementById("idealSleepHours").value;
const idealSleep = idealSleepHours * 7;
// Test to make sure idealSleep prints
// document.getElementById("testBox").innerHTML = idealSleep;
// Calculations
if (actualSleep === idealSleep && actualSleep > 0 && idealSleep > 7) {
document.getElementById("testBox").innerHTML = 'You got the perfect amount of sleep!';
}
else if (actualSleep > idealSleep){
document.getElementById("testBox").innerHTML = `You slept too much! Cut down your sleep by ${actualSleep - idealSleep} hour(s).`;
}
else if (actualSleep < idealSleep){
document.getElementById("testBox").innerHTML = `You need to sleep more! You should sleep ${idealSleep - actualSleep} hour(s).`;
}
else if (actualSleep === idealSleep){
document.getElementById("testBox").innerHTML = 'Error!';
}
}
</script>
</body>
</html>