Capstone: A Live Tip Calculator
Combine state, events, props of derived values, and live rendering into one real component — a tip calculator that updates as you type.
Step 1 of 3
The brief
Time to combine everything. You'll build a tip calculator — the kind of small, useful widget that lives on real sites. It must:
- Take a bill amount from an input.
- Let the user pick a tip percentage from buttons (10%, 15%, 20%).
- Take the number of people splitting the bill.
- Show the amount each person pays, updating live as any input changes.
Every concept from this module shows up here: useState for the three inputs, onChange and onClick for events, a derived calculation, and live rendering with no manual DOM work.
Tip
The per-person amount is not stored in state — it's derived from the bill, tip, and people on every render. Whenever you can compute a value from existing state, do that instead of adding another useState. Fewer pieces of state, fewer ways to get out of sync.
Learn more on MDN