Webflow Recipe Calculator

Hi guys, I’m making a collection of recipes in CMS and I’d really love for my users to be able to do TWO things:

One is to scale up and down the recipe to fit how many servings.

Second is to be able to press an ingredient or step in the recipe to cross it over when done.

How do I achieve these two thing?

Here is my read-only: Webflow - Greenster

It will be all custom programming.
To make it simpler, I’d probably-

  • Pick one measurement system for everything, either imperial or metric
  • Store the # portions with each recipe, as the baseline
  • Be very standardized in how you describe your measures, e.g. you might store your ingredients inside of rich text, but always at the beginning of unordered LI’s so they’re easy for your script to find

Then your controls can be # portions, and measurement system

From there it’s easy to calculate one portion, multiply, and to convert to e.g. metric