Improved function

Make the following changes to the 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>
+    <p>I plan to fall sleep at...</p>
+
+    <select id="hh">
+        <option>(hour)</option>
+        <option>1</option>
+        <option>2</option>
+        <option>3</option>
+        <option>4</option>
+        <option>5</option>
+        <option>6</option>
+        <option>7</option>
+        <option>8</option>
+        <option>9</option>
+        <option>10</option>
+        <option>11</option>
+        <option>12</option>
+    </select>
+    
+    <select id="mm">
+        <option>(minute)</option>
+        <option>00</option>
+        <option>05</option>
+        <option>10</option>
+        <option>15</option>
+        <option>20</option>
+        <option>25</option>
+        <option>30</option>
+        <option>35</option>
+        <option>40</option>
+        <option>45</option>
+        <option>50</option>
+        <option>55</option>
+    </select>
+    
+    <select id="ampm">
+        <option>PM</option>
+        <option>AM</option>
+    </select>
+    
+    <br />
+    <br />
+    
+    <button onclick="handleOnClick();">CALCULATE</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:
+        You should try to wake up at one of the following times:
       <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>

The <select> element is used to create a drop-down list.

We further need to adjust the output content:

Stage and commit changes:

git add index.html 
git commit -m "Allow user to select a time to sleep."

Next, update the script.js

 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 hh = document.getElementById("hh").value;
+  let mm = document.getElementById("mm").value;
+  let ampm = document.getElementById("ampm").value;
+  hh = ampm === "PM" ? hh + 12 : hh;
   let now = new Date();
-  // allow 14 minutes to fall sleep!
-  now.setMinutes(now.getMinutes() + 14);
+  now.setHours(hh);
+  now.setMinutes(mm);
 
 // calculate sleep cycles!
   for (let i = 1; i <= 6; i++) {
     now.setMinutes(now.getMinutes() + 90);
     const elm = createWakeUpTimeElement(
       now.toLocaleTimeString("en-US", { timeStyle: "short" }),
       i
     )
     hours.appendChild(elm);
   } 
 }

The value property sets or returns the value of the selected option in a drop-down list.

Stage and commit changes:

git add script.js 
git commit -m "Use the provided sleep time to calculate wakeup times."

There is a bug 🐛 in the solution provided here. In class, we will use the built-in debugger in Chrome Developer Tools to debug it.

Debug

The bug is in script.js. Here is a fix:

-    hh = ampm === "PM" ? hh + 12 : hh;
+    hh = ampm === "PM" ? Number.parseInt(hh) + 12 : hh;

Commit the changes:

git commit -am "Bug fix: convert hour to number before updating it."

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.