Explore projects
JavaScriptbeginnerweb
Recipe Ingredient Scaler
You enter a recipe with ingredients and quantities, specify how many servings you want, and the application automatically scales everything.
5 steps
Project steps
- 01
Recipe form
Dynamic input for adding ingredients (name + quantity + unit).
- 02
Scaling logic
Calculates proportionally when the user changes the number of servings.
- 03
Units of measurement
Automatic conversion: ml ↔ liters, g ↔ kg.
- 04
Save recipes
Store recipes in localStorage with name and thumbnail.
- 05
Print mode
Separate styling for print (@media print) without UI.
Recommended resources
Ready to build this?
Fork the repo on GitHub and start building. A mentor will review your code when you open a PR.
5 steps
Tech stack
HTMLCSSVanilla JS