Tip Calculator
A beginner-friendly Svelte example: Create a tip calculator with bill amount and split options
What You'll Learn
- Form input handling with bind:value
- Real-time calculations with reactive statements
- Number formatting and validation
- Working with radio buttons and select inputs
- Basic error handling
Project Structure
tip-calculator/ ├── src/ │ ├── lib/ │ │ ├── BillInput.svelte │ │ ├── TipSelect.svelte │ │ ├── SplitInput.svelte │ │ └── Results.svelte │ ├── utils/ │ │ └── calculations.js │ └── App.svelte ├── public/ │ └── index.html └── package.json
Key Features
- Bill amount input with validation
- Custom tip percentage options
- Split bill calculator
- Real-time total calculation
- Currency formatting
- Reset functionality