JavaScript DOM Interactions

JavaScript

Build a Live Festival Pass

Complete a festival pass input handler that trims the visitor's name, updates the badge instantly, and shows an accurate 20-character count.

50XPBeginner

JavaScript

Toggle the Record Player

Complete a record player control that toggles playback, updates the button and status labels, and keeps the turntable animation in sync.

50XPBeginner

JavaScript

Build a Ticket Quantity Stepper

Wire a ticket quantity stepper that stays between zero and eight, updates the total and summary, and disables controls at the correct limits.

50XPBeginner

JavaScript

Build a Notification Inbox

Use one delegated click handler to mark inbox items as read, update each button and row, and recalculate the remaining unread total.

100XPIntermediate

JavaScript

Build a Field Notes Checklist

Add delegated checklist toggles, persistent status filters, and accessible progress updates to a field journal, including an accurate empty state.

100XPIntermediate

JavaScript

Build an Interactive Metro Route Planner

Create a two-step DOM interaction that selects metro endpoints, highlights the route, calculates stops, and resets the planner.

100XPIntermediate