Manipulating the DOM

Right now our wake-up times appear in the console. Let’s display them on the page instead.

Adding a Container for Results

First, we need a place in the HTML to put the results. Update index.html to add a container div after the button:

    <button id="calc-btn">Calculate</button>
+   <div id="wakeup-hours-div"></div>
    <script src="index.js"></script>

This empty div will hold our wake-up times. A <div> is a generic container element. It groups content together. Divs are block-level elements, meaning they take up the full width available and start on a new line.

Refresh the browser. The page looks the same since the div is empty.

Getting a Reference to the Container

In index.js, add a reference to the new div at the top:

const calcBtn = document.getElementById("calc-btn");
const wakeUpHoursDiv = document.getElementById("wakeup-hours-div");  // 👀 Add this

Displaying the Times as Text

Let’s start simple: just put the times as text in that div. Update calcWakeUpTimes:

function calcWakeUpTimes() {
  const fallAsleepTime = new Date();
  fallAsleepTime.setMinutes(fallAsleepTime.getMinutes() + 14);

  const wakeUpTime = new Date(fallAsleepTime);
  const wakeUpTimes = [];

  for (let i = 1; i <= 6; i++) {
    wakeUpTime.setMinutes(wakeUpTime.getMinutes() + 90);
    const timeString = wakeUpTime.toLocaleTimeString("en-US", {
      timeStyle: "short",
    });
    wakeUpTimes.push(timeString);
  }

  wakeUpHoursDiv.textContent = wakeUpTimes.join(", ");  // 👀 Changed from console.log
}

Click Calculate. The times appear on the page. But they are all on one line. Let’s improve the display.

Creating Elements Dynamically

Instead of showing all times as one string, let’s create a separate <div> for each time:

function calcWakeUpTimes() {
  const fallAsleepTime = new Date();
  fallAsleepTime.setMinutes(fallAsleepTime.getMinutes() + 14);

  const wakeUpTime = new Date(fallAsleepTime);
  wakeUpHoursDiv.innerHTML = "";  // 👀 Clear previous results

  for (let i = 1; i <= 6; i++) {
    wakeUpTime.setMinutes(wakeUpTime.getMinutes() + 90);
    const timeString = wakeUpTime.toLocaleTimeString("en-US", {
      timeStyle: "short",
    });

    // 👀 Create a div for each time
    const cycleDiv = document.createElement("div");
    cycleDiv.setAttribute("id", `cycle-${i}`);
    cycleDiv.textContent = timeString;
    wakeUpHoursDiv.appendChild(cycleDiv);
  }
}

Here is what is happening:

• innerHTML = "" clears any existing content (useful if the user clicks Calculate again)
• document.createElement("div") creates a new <div> element (not yet on the page)
• setAttribute("id", ...) gives each div a unique ID (cycle-1, cycle-2, etc.) using a template literal
• textContent sets the text inside
• appendChild() inserts the element into the DOM, making it visible

Since each element has a unique ID, you could later access any specific cycle using document.getElementById(`cycle-${n}`) where n is the cycle number.

Click Calculate. You should see 6 times stacked vertically. Click again. They update with fresh times.

The app works, but it has no styling. In the next section, we will add CSS to improve its appearance.

Checkpoint: Commit your progress.

git add .
git commit -m "wakeup-03: Add DOM manipulation"
git push