Improved styling
Let’s update the style.css
as follows
body {
text-align: center;
color: aliceblue;
background-color: darkblue;
}
.output {
border: 3px solid white;
margin: 1em 5em 1em 5em;
+ padding: 2em;
display: none;
+}
+
+#hours {
+ font-size: x-large;
}
Notice the leading #
in #hours
. When we aim to declare style attributes for an element with a particular ID attribute, we use the #
selector together with the ID.
Stage and commit changes:
git add style.css
git commit -m "increase padding and font size of wake up hours."
Additionally, update the script.js
file as follows:
+const colors = [
+ "rgb(168, 39, 254)",
+ "rgb(154, 3, 254)",
+ "rgb(150, 105, 254)",
+ "rgb(140, 140, 255)",
+ "rgb(187, 187, 255)",
+ "rgb(143, 254, 221)",
+]
+
+function createWakeUpTimeElement(time, cycle) {
+ let elm = document.createElement("div");
+ elm.innerText = time;
+ elm.style.color = colors[cycle];
+ return elm;
+}
+
function handleOnClick() {
let output = document.querySelector(".output");
output.style.display = "block";
let hours = document.getElementById("hours");
hours.innerHTML = "";
let now = new Date();
// allow 14 minutes to fall sleep!
now.setMinutes(now.getMinutes() + 14);
// calculate sleep cycles!
for (let i = 1; i <= 6; i++) {
now.setMinutes(now.getMinutes() + 90);
- hours.innerHTML += now.toLocaleTimeString("en-US", { timeStyle: "short" }) + "<br />";
+ const elm = createWakeUpTimeElement(
+ now.toLocaleTimeString("en-US", { timeStyle: "short" }),
+ i
+ )
+ hours.appendChild(elm);
}
}
Notice we are using JavaScript to create content!
I'm personally not a fan of using JavaScript in this capacity. However, many JavaScript frameworks for building front-end applications work this way.
Stage and commit changes:
git add script.js
git commit -m "Use a different color for each wakeup time."
Now push the changes to the GitHub repository:
git push
Give it a minute or two and then visit your GitHub Page. The deployed app should reflect the latest changes.