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! 🎉🎉