Recipes

Recipes I make, with a servings calculator for each.

Drag the slider on any recipe to scale the ingredient amounts up or down.

Pancakes

Base recipe serves 4.

viewof pancakes_servings = Inputs.range(
  [1, 12], {value: 4, step: 1, label: "Servings"}
)

pancakes_base = ({
  servings: 4,
  ingredients: [
    { name: "Flour", amount: 200, unit: "g" },
    { name: "Milk", amount: 300, unit: "ml" },
    { name: "Eggs", amount: 2, unit: "" },
    { name: "Sugar", amount: 30, unit: "g" },
    { name: "Baking powder", amount: 2, unit: "tsp" },
    { name: "Salt", amount: 1, unit: "pinch" }
  ]
})

pancakes_scaled = {
  const ratio = pancakes_servings / pancakes_base.servings;
  return pancakes_base.ingredients.map(i => ({
    Ingredient: i.name,
    Amount: Math.round(i.amount * ratio * 100) / 100,
    Unit: i.unit
  }));
}

Inputs.table(pancakes_scaled, {columns: ["Ingredient", "Amount", "Unit"]})

Mix dry ingredients, whisk in milk and eggs, then cook spoonfuls on a hot greased pan until bubbles form, flip, and cook the other side.

This is a placeholder recipe to demonstrate the format — copy this section’s structure (a viewof ..._servings slider, a ..._base ingredient list, a ..._scaled calculation, and an Inputs.table(...) call) for each recipe you add, giving each its own variable-name prefix so they don’t clash.