Build your first tiny interactive page

This is your first full tiny interactive JavaScript page. The goal is completion, not perfection.

You are not building a full app here. You are building one small page that reacts to one simple action in a way you can understand and explain.

Your lesson goals are simple:
- combine a few beginner ideas into one working page
- connect a button click to a JavaScript response
- change something visible on the page with the DOM
- finish a tiny project that still feels real
- leave the JavaScript track with a clear first win

This page will stay very small:
- one heading
- one button
- one short message area
- one click event
- one function
- one visible text change

That is enough for a real beginner interaction.

Start with a tiny structure:

<h1 id="title">My Tiny Page</h1>
<p id="message">Click the button to see a change.</p>
<button id="change-button">Click me</button>

Beginner meaning:
the heading gives the page a clear top label
the paragraph shows the starting message
the button gives the user something to click

That is enough HTML for this project.

Next add a tiny function:

function showUpdate() {
document.getElementById("message").textContent = "Nice work. You made it interactive."
}

Line by line:
showUpdate is the function name.
document.getElementById("message") finds the message area.
textContent changes the words inside that page part.

This keeps the page logic small and readable.

Now connect the button to the function:

document.getElementById("change-button").addEventListener("click", showUpdate)

Line by line:
document.getElementById("change-button") finds the button.
addEventListener("click", showUpdate) says: when the button is clicked, run the showUpdate function.

This is the moment where the page becomes interactive.

When the page loads, the message says:
Click the button to see a change.

After the click happens, the message changes to:
Nice work. You made it interactive.

That visible update is the beginner win. The page reacts because the button click triggers the function, and the function changes the page text.

Here is the full tiny page:

<h1 id="title">My Tiny Page</h1>
<p id="message">Click the button to see a change.</p>
<button id="change-button">Click me</button>

<script>
function showUpdate() {
document.getElementById("message").textContent = "Nice work. You made it interactive."
}

document.getElementById("change-button").addEventListener("click", showUpdate)
</script>

This page stays small, readable, and real.

Ask a few simple questions:

- does the page load
- does the button work
- does the visible text change as expected
- does the page still feel simple and readable

If those answers are yes, your tiny page is doing its job.

A few small mistakes happen often:

Connecting the event incorrectly:
The button may exist, but the function is never connected to the click.

Targeting the wrong part of the page:
The code may be pointing at the wrong id.

Forgetting a quote or bracket:
Small punctuation details still matter.

Trying to add too much behavior at once:
Keep the page to one clear interaction first.

This project uses real JavaScript ideas you have already learned:
HTML structure, a function, a click event, and a DOM update.

That means this is not pretend practice. It is a real beginner project built from connected parts.

You built a tiny interactive page with a button, a click event, a function, and a visible DOM change.
The page stays small enough to understand and real enough to feel like progress.
If you can explain what the button does, what the function changes, and what the student sees after the click, you have completed a real first JavaScript win.

That is enough to move into Python Starter Overview next.