The SleepTime App

Let’s copy the SleepTime App files from previous lesson.

index.html 
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sleeptime</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Sleeptime App</h1>
    <p>If you go to bed NOW, you should wake up at...</p>
    <button onclick="handleOnClick();">zzz</button>
    <div class="output">
      <p>It takes the average human 14 minutes to fall sleep.</p>
      <p>
        If you head to bed right now, you should try to wake up at one of the
        following times:
      </p>
      <p id="hours">
        12:15 AM<br />
        1:45 AM<br />
        3:15 AM<br />
        4:45 AM<br />
        6:15 AM<br />
        7:45 AM
      </p>
      <p>A good night's sleep consists of 5-6 complete sleep cycles.</p>
    </div>
    <script src="script.js"></script>
  </body>
</html>
style.css 
body {
  text-align: center;
  color: aliceblue;
  background-color: darkblue;
}
.output {
  border: 3px solid white;
  margin: 1em 5em 1em 5em;
  display: none;
}
script.js 
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 />";
  } 
}

Tip: you can create the files from within the integrated terminal in VSCode using touch filename command. You can further open a file with code -r filename. The -r flag is to “reuse” the current VSCode window.

Open the index.html file with in a browser to ensure it works as expected.

Tip: you right click on index.html in VSCode and select “Open with Live Server” to same effect or run the command open -a "Google Chrome" index.html in the terminal.