Project Step 4: Make Your Website Interactive

Mission 4, the last building step. Your website gets three small pieces of behaviour: a greeting, a list of your goals, and a button that shows more about you.

Show the answer

Make it with document.createElement("li"), fill it with textContent, and add it with appendChild(). You did this in lesson 4.2.

The plan

Part	HTML and CSS	JavaScript
1. Greeting	<p id="hello"></p> in the header	A template literal and textContent
2. Goals	A section with the id goals, a heading and an empty <ul id="goal-list">	An array, a for loop, createElement(), appendChild()
3. More about me	A button with the id more-btn and a box with the id more in the side area; CSS #more { display: none; }	A function with if and else that changes style.display

How a tap runs your code

A button needs a function and a connection. The course slides on buttons (Part 2) connect them in the HTML with the attribute onclick:

<button type="button" onclick="toggleMore()">More about me</button>

Today most developers connect them in the JavaScript with addEventListener(), so HTML and JavaScript stay apart. We recommend this way:

document.getElementById("more-btn").addEventListener("click", toggleMore);

Write the function name without brackets here: the browser calls it later, at the tap. Use one of the two ways, not both, or the function runs twice.

Step by step

Tap, function, change

Required 10 XP

Worked example: the toggle function

function toggleMore() {
  const more = document.getElementById("more");
  if (more.style.display === "block") {
    more.style.display = "none";
  } else {
    more.style.display = "block";
  }
}

At the start your CSS hides the box, but style.display is still empty: it only shows styles that JavaScript set. So the first tap goes to else and shows the box. The second tap hides it again.

Your turn: bring your website to life

The exercise starts with your website from Project Step 3. Use the chips to add the new HTML, CSS and JavaScript, part by part, then check. Use your own name and goals; a nickname is fine. This step earns the First Interaction badge.

Practice

My website comes to life

Required 60 XP

Project step 4: your website from Project Step 3 is loaded. Add a greeting, your goals and a "More about me" button, part by part.

In a real website, save the JavaScript as script.js and add <script src="script.js"></script> right before </body>. Here the JavaScript tab does this for you.

Warm-up for the challenge

Three optional questions before the Unit 4 challenge. They give extra XP.

Quick check

Warm-up for the challenge

10 XP

Quick check

Warm-up for the challenge

10 XP

Quick check

Warm-up for the challenge

10 XP

Event

Something that happens on the page, like a click or a tap.

onclick

An HTML attribute that runs JavaScript at a click or tap.

addEventListener()

Connects an event to a function, from the JavaScript.

Toggle

Switch between two states: open, closed, open again.

In short

• A template literal and textContent greet your visitors.
• An array and a for loop build the goals list.
• A tap calls a function; if and else show or hide the box.
• Connect the button with addEventListener() (recommended) or onclick, not both.

Sources

1. MDN Web Docs (2026). Introduction to events.
2. MDN Web Docs (2026). EventTarget: addEventListener() method.
3. MDN Web Docs (2026). HTMLElement: style property.
4. MDN Web Docs (2026). aria-expanded.