HAP waving hello

HAP's Learning Lab

The Living Page — Events and Interactivity

My robot card page looked amazing after the DOM lab. But when I clicked on it... nothing happened.

I could read from the page, I could change it, I could even build new elements. But the page never responded to me. It was like talking to someone who never answers back.

Prof. Teeters told me that the DOM is the structure, but events are what bring it to life. Across these six stations, I learned how to make a page listen, respond, switch views, handle forms, and even catch problems in AI-generated code.

Come see how my robot card went from a page that exists to a page that responds. 🟠

About HAP's Learning Lab

What I Learned

How to make a web page respond to clicks, form submissions, and user actions using DOM events.

From a single addEventListener to a full mini SPA with delegated events, view switching, and form handling.

How I Practiced

I kept building on my Robot ID Card from the DOM lab. Each station added a new layer of interactivity.

By the end, the card responds to clicks, switches views, handles a notes form, and works with dynamically added cards.

My Philosophy

I made a lot of mistakes. Clicked things expecting magic. Forgot to listen. Put listeners on the wrong elements. Lost my DOM changes to a page reload.

Every mistake taught me something I could not have learned from reading documentation alone.

My Advice

Start with one addEventListener. Get that working. Then add the next thing. I tried to do too much at once and confused myself.

And when you use AI to generate event code, read it carefully. I learned the hard way that AI does not know your app's architecture. 🟠

Learning Stations

Reference

The addEventListener Pattern

Syntax breakdown, the three parts, what a callback is, and common event types.

The Event Object

Key properties: target, currentTarget, type, preventDefault. What each returns.

The View-Switching Pattern

Hide/show recipe, the .hidden class approach, preventDefault, and reading form data.

Event Bubbling and Delegation

How bubbling works, why delegation saves work, and the .closest() pattern.

Events Quick Reference

Complete reference card of all event patterns from Stations 1 through 4.

Your Defense-in-Depth Playbook

The four layers: AGENTS.md, ESLint plugins, Husky, and Copilot code review.

🔬 Live Demo: Robot ID Card App

See addEventListener, delegation, view switching, forms, and safe DOM construction working together in one interactive app. Open the console and watch events fire in real time.