JavaScript Interaction: Adding Behavior to Pages

Module Goal

Give static pages real interaction capabilities that are maintainable.

---

Three-Step Interaction Development

1. Identify the trigger point (who triggers it)
2. Identify the state change (what changes)
3. Identify the feedback output (what the user sees)

---

Common Interaction Scenarios

• Button click feedback
• Form validation and hints
• List filtering and sorting
• Modal open/close and state sync

---

Tips to Avoid "Event Handler Hell"

• Each event handler does only one thing
• Extract repeated logic into functions
• Use clear naming to express behavioral intent

---

Lab Exercise Tips for This Module

When doing JavaScript Labs, don't just check "passed validation." Also answer:

• Is this logic reusable?
• Is state from a single source?
• When things go wrong, can the user understand what happened?

---

Transfer Task

Build a small interactive component (like a todo list) with vanilla JS:

• Add items
• Delete items
• Toggle status

And write 3 of your own "maintainability rules."