Step 11

Take a moment and read through the code below; feel free to run (click on play button) and experiment with it. Of course, I expect that you understand the code (since you've done programming in Java/C++).

let now = new Date();
// Allow 14 minutes to fall sleep!
now.setMinutes(now.getMinutes() + 14);

// Calculate sleep cycles!
let hours = "";
for (let i = 1; i <= 6; i++) {
  now.setMinutes(now.getMinutes() + 90);
  hours += now.toLocaleTimeString("en-US", { timeStyle: "short" }) + "\n";
}

console.log(hours);

We need to plug this code into the <script> element:

<script>
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 />";
  } 
}
</script>
  • Save the index.html file; refresh the index page in the browser. You must now have a working application.