Intermediate
Pizza order: radios, checkboxes and a select
Make every choice controlled. Size: three radios with name="size" and values S, M, L, starting at M. Toppings: checkboxes with name="topping" and values cheese, olives, corn, none ticked at first. Crust: the select id="crust" with thin (the start) and thick.
The paragraph id="summary" reads like M pizza, thin crust, toppings: none, or L pizza, thin crust, toppings: cheese, corn with the toppings in list order (cheese, olives, corn), whatever order they were ticked in.
The paragraph id="price" shows Price: ₹300: S is 200, M 300, L 400, plus 30 per topping.
What Check tests
- It starts as an M pizza with thin crust and no toppings for ₹300
- Choosing L updates the summary and the price
- Ticking corn, then cheese lists
cheese, cornand costs ₹460 - Unticking corn removes it
- Choosing thick crust updates the summary
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.