|
|
|
@ -0,0 +1,30 @@
|
|
|
|
|
|
|
|
# Tip Calculator
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**Tier:** 1-Beginner
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Calculate a tip and total bill based on the bill amount, tip percentage, and number of people splitting the bill. This is a classic starter project to practice numeric input handling and basic UI updates.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## User Stories
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- [ ] User can enter the bill amount
|
|
|
|
|
|
|
|
- [ ] User can select a tip percentage (e.g., 5%, 10%, 15%, 20%, custom)
|
|
|
|
|
|
|
|
- [ ] User can enter number of people to split the bill
|
|
|
|
|
|
|
|
- [ ] User sees calculated tip amount and total per person update instantly
|
|
|
|
|
|
|
|
- [ ] User sees input validation errors for non-numeric or negative values
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Bonus features
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- [ ] Add preset percentage buttons and a custom percentage input
|
|
|
|
|
|
|
|
- [ ] Persist last used values in local storage
|
|
|
|
|
|
|
|
- [ ] Format currency based on locale
|
|
|
|
|
|
|
|
- [ ] Keyboard-only accessibility and screen reader friendly labels
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Useful links and resources
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- [Number() – MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)
|
|
|
|
|
|
|
|
- [Intl.NumberFormat – MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Example projects
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- [Build a Tip Calculator (YouTube)](https://www.youtube.com/results?search_query=tip+calculator+javascript)
|
|
|
|
|
|
|
|
|