CODESEEDSign in
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

  1. 01

    Recipe form

    Dynamic input for adding ingredients (name + quantity + unit).

  2. 02

    Scaling logic

    Calculates proportionally when the user changes the number of servings.

  3. 03

    Units of measurement

    Automatic conversion: ml ↔ liters, g ↔ kg.

  4. 04

    Save recipes

    Store recipes in localStorage with name and thumbnail.

  5. 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