DOM

Look, this isn't a front-end specific JavaScript course (in fact, it's not even back-end specific), it's a language course. But it's impossible to talk about JavaScript without mentioning its original use case: doing fancy stuff in the browser.

The DOM (Document Object Model) is just an in-memory representation of an HTML document, you know, the thing that front-end developers suffer through working with on a daily basis. If you've built our static site generator project, you kinda built a DOM from scratch when you converted your markdown into in-memory nodes.

Okay So What's It Look Like?

Let's pretend we have this super cool HTML file that represents a homepage:

<html>
  <head>
    <title>Princess Mononoke Fan Club</title>
  </head>

  <body>
    <h1 id="mainHeading">A Fan Club for Mononoke Enjoyers</h1>
    <p>
      Join us in reveting discussion about the philosophical truths and untruths
      revealed in the greatest metaphor of modern times.
    </p>
    <p>Every Tuesday at 7pm EST.</p>
    <button id="joinButton">Join the Fun</button>
  </body>
</html>

When this HTML file is loaded into a browser, the browser creates a DOM in memory that our JavaScript code can interact with through a global object called document. For example, let's say I wanted to change the text of the <h1> (header) and the style of the <p> (paragraph) elements when a user clicks the "Join the Fun" button.

First, I need to define a function that will be called when the button is clicked:

function onJoinClick() {
  // ...
}

Inside the function, I can access the h1 element by the id attribute that I gave it and change its text content:

function onJoinClick() {
  document.getElementById("mainHeading").textContent = "Welcome to the Club!";
}

Next, let's say I want to change the color of the text in the paragraph. I can access all the p elements and change their style properties:

function onJoinClick() {
  document.getElementById("mainHeading").textContent = "Welcome to the Club!";
  const paragraphs = document.getElementsByTagName("p");
  for (const p of paragraphs) {
    p.style.color = "red";
  }
}

Finally, I need to register the function to be called when the button is clicked by adding an event listener:

document.getElementById("joinButton").addEventListener("click", onJoinClick);

Now, when the user clicks the "Join the Fun" button, the text of the header will change to "Welcome to the Club!" and the color of the paragraphs will change to red.

Click-A-Thon

Textio is being flooded with support emails about the poor Xirpy integration. To deal with this, the higher-ups have a brilliant plan: a "Click-A-Thon" challenge! When a customer reaches the support page, they have 5 minutes to click a button as many times as possible. And if the timer hits 0, it just resets to another 5 minutes.

Create a new file called index.html.
Copy and paste the code below into your index.html file.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Textio Click-a-thon Prototype</title>
    <style>
      body {
        font-family: sans-serif;
        margin: 20px;
      }
      button {
        margin: 5px 5px 5px 0;
        padding: 8px 14px;
        cursor: pointer;
      }
      #timer,
      #counter {
        font-weight: bold;
        margin: 5px 0;
      }
    </style>
  </head>
  <body>
    <h1>Textio "Click-a-thon" Challenge</h1>
    <p>
      We found that letting users click a button for 5 minutes keeps them too
      busy to send support emails. Once the timer hits 0, it just
      <em>resets</em>, so they can keep going!
    </p>
    <button id="startButton">Start</button>
    <button id="clickButton" disabled>Click me!</button>
    <p id="timer">Time left: 300</p>
    <p id="counter">Clicks: 0</p>

    <script>
      let clicks = 0;
      let countdown = 300;

      function updateUI() {
        document.getElementById("timer").textContent =
          `Time left: ${countdown}`;
        document.getElementById("counter").textContent = `Clicks: ${clicks}`;
      }

      function tick() {
        // ?
      }

      function onClick() {
        // ?
      }

      function onStart() {
        // ?
      }

      document.getElementById("startButton").addEventListener("click", onStart);
      document.getElementById("clickButton").addEventListener("click", onClick);
      document.getElementById("clickButton").disabled = true;
    </script>
  </body>
</html>

Open your index.html in your favorite browser.
Try clicking the button. Nothing should be working yet. Let's fix that.

Assignment

Complete the tick() function:
- Decrement the countdown variable by 1.
- If countdown reaches 0, reset it to 300 and reset clicks to 0.
- Update the UI to display the new time left.
Complete the onClick() function.
- Increment the clicks counter each time the "Click me!" button is pressed.
- Update the UI to display the updated click count.
Implement the onStart() function:
- Enable the "Click me!" button and disable the "Start" button.
- Start a timer using setInterval that calls tick() every second.

With all that in place, Textio has a prototype of the click-a-thon!