Step 7
Styling
Add the following content to style.css
:
body {
text-align: center;
background-color: #001f3f;
color: #7fdbff;
font-size: 150%;
}
.output {
border: 1px solid white;
margin: 20px;
display: none;
}
Commit the changes:
git commit -am "Add basic styling"
Event Listener
Add the following to the end of script.js
:
function zzzOnClick() {
let output = document.querySelector(".output");
output.style.display = "block";
let hours = "";
// get current time
let now = Date.now(); // in milliseconds
let minute = 60 * 1000; // milliseconds
let cycle = now;
// allow 14 minutes to fall sleep
cycle += 14 * minute;
// calculate 6 sleep cycles (each 90 minutes)
for(let i = 0; i < 6; i++) {
cycle += 90 * minute;
// append the sleep cycles to hours string
hours += new Date(cycle).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
if (i < 5) {
hours += " OR ";
}
}
// output hours
let hoursElm = document.querySelector("#hours");
hoursElm.innerText = hours;
}
The code above is what we've developed in previous lectures.
We must now add an event listener to the zzz
button. You can add this anywhere after the zzz
element is created, but perhaps it is best situated right before the zzz
element is appended to root
:
index 871b173..b98de79 100644
--- a/script.js
+++ b/script.js
@@ -6,6 +6,7 @@ root.append(p);
let zzz = document.createElement("button");
zzz.innerText = "zzz";
+zzz.addEventListener("click", zzzOnClick);
root.append(zzz);
Commit changes:
git commit -am "Add event listener for zzz button"
And with that, we have completed the SleepTime App, once again! 🎉🎉