Add behavior carefully
Want more background?
The idea in everyday life
Use the supplied JavaScript to follow one complete local interaction from submission through validation, pending feedback, success and recovery. README section 4 names each matching HTML control and the exact expected results. Change the price in both the explanation and calculation, then rerun the cases to demonstrate that you can maintain the behavior.
HTML provides capability, CSS communicates state, and JavaScript coordinates change.
One step at a time.
Use the sample or information you have permission to use. Keep your work as you go. You can pause between steps.
- 1
Open script.js beside index.html. Match the form/input/result IDs to querySelector calls. The submit handler converts minutes to 15-minute blocks and a $10-per-block cost; it sends no booking.
- 2
Trace blank/range/integer validation, disabled button, pending message, success and catch/finally recovery. Test W1–W7 in expected-results.md: include blank, 0, 14, 16, 121 and 15.5, then valid 15, 60 and 120.
- 3
Check the temporary-failure box and submit 60: the pending state must lead to a visible recovery message with the input kept. Uncheck it and retry for 4 blocks and $40.
- 4
Change the price to $12 in BOTH the written example and the script. Verify 60 minutes now costs $48; restore $10 and rerun. Keep test predictions, observations and the changed-input proof.
See how it works.
Expected results: blank or 16 shows a correction; 15 gives 1 block/$10; 60 gives pending then 4 blocks/$40; 120 gives 8 blocks/$80. The failure checkbox makes 60 produce a visible retry message and retains 60. Unchecking it restores success. With the script disabled, the content, links, disclosure and written cost rule remain.
Did you cover these?
- W1–W7 match the supplied field-level expected outputs and preserve input on error.
- The $12 variation gives $48 at 60 minutes; restored $10 gives $40.
- The core content and manual calculation remain available without JavaScript; no real booking is claimed.
What to finish
One complete interaction with keyboard support and all four user-facing states.
Watch for this
Adding a large framework or animation layer for a page that only needs simple document behavior.
How can I tell I understand it?
You can explain why JavaScript is necessary for each interactive feature.
Quick knowledge check
Answer all 3 questions. Get at least 2 right and the lesson completes automatically.
You’ll get an explanation for each answer. Signed in? Your results save to your account.
Pass the check. We’ll save the progress.
Answer all 3 questions above and get at least 2 right. You can review the explanations and try again.
Go to the knowledge checkOptional course overview video · same video as Lesson 1
Full Stack Web Development for Beginners
From freeCodeCamp.org. Watch here or open it on YouTube .
During the optional JavaScript sections, trace events and visible state changes; use the supplied failure and retry cases to check your own understanding.Tools, templates, and lesson sources
Tools and templates
Tools open in a new tab so you can keep your place here.
Sources and further reading
Explore the references behind this lesson.
Report a problem with this lesson
Tell us what went wrong. Please leave out personal information and private project contents.