Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.
User interface challenge
Flight Booker
easy25 min
Create a small booking form that switches between one-way and return travel. Coordinate date availability, date validation and the confirmation shown after submission.
Requirements
Start with a one-way trip, departure 2030-06-01 and return 2030-06-08. These fixed defaults make the exercise independent of today’s date.
Use the two native trip-type buttons; indicate the selected type with aria-pressed. Disable the return date for one-way trips.
Enable booking only when departure is a valid date and, for return trips, the return is a valid date on or after departure.
Submit without navigation and show exactly “One-way flight on YYYY-MM-DD” or “Return flight: YYYY-MM-DD to YYYY-MM-DD”.
Clear an existing confirmation whenever trip type or either date changes. No network request or pricing is required.
Keep the supplied IDs so browser checks can find the controls. Use your selected framework to update the view; do not query or mutate rendered DOM manually.
Examples
Example 1
Input: Book the default trip
Output: One-way flight on 2030-06-01
Example 2
Input: Switch to Return and book
Output: Return flight: 2030-06-01 to 2030-06-08
Choose a trip type and valid dates, then submit to display the booking summary.
