Tip Calculator

Your first interactive page: type a bill, see the tip update live.

The gentlest possible start. Three inputs, a little math, and the numbers on screen change as you type. You'll learn the pattern behind almost every web page: read the inputs, calculate, write the answer back.

What's inside

• Live updates on every keystroke and slider move
• The read → calculate → render loop, explained line by line
• Currency formatting with the built-in Intl API
• Automatic light & dark mode via one CSS block
• No build step — double-click index.html and it works

Quickstart

$ curl -LO https://devai.io/downloads/tip-calculator.zip$ unzip tip-calculator.zip && cd tip-calculator$ open index.html   # or just double-click the file

Browse the code

The full source, exactly as the zip ships it.