jQuery recipe quantity calculator

user_10745217 0
Viewed 114

I would like to create a calculator for a recipe that multiplies the quantity based on the number of people. The current script does some math and updates the spans with the quantity, but it comes up with something really weird.

First field I Define the amount of people (standard 4 people in the recipe)

The next fields contain the quantity of something (standard quantity for 4 people):

I suspect that one problem is the class "quantity" that exists several times. I have somehow tried to get the effective value out of every single span quantity class with .each(), but that just doesn't work.

jQuery(document).ready(function($) {
  $("#people").change(function() {
    $people = $(this).val();
    $quantity = parseFloat($(".quantity").text());
    $(".quantity").html($people * $quantity);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" value="4" id="people">
<p><span class="quantity">4</span> pieces of something</p>
<p><span class="quantity">200</span> g of butter</p>
<p><span class="quantity">500</span> ml of milk</p>

html jquery
1 Answers

You mean this

$(function() {
  $("#people").on("input", function() {
    const people = +$(this).val();
    const base = +$(this).data("ppl");
    $(".quantity").text(function() {
      return people ? ($(this).data("qty") * ( people / base)).toFixed(0) : 0
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" value="4" data-ppl="4" id="people">
<p><span class="quantity" data-qty="4">4</span> pieces of something</p>
<p><span class="quantity" data-qty="200">200</span> g of butter</p>
<p><span class="quantity" data-qty="500">500</span> ml of milk</p>

Using an object:

const recipies = {
  "Cheese cake": {
    base: 4,
    ingredients: ["4 of something", "200g of flour", "400g of cottage cheese", "2 spoons of sugar"]
  },
  "Chocolate cake": {
    base: 4,
    ingredients: ["8 of something", "400g of flour", "500g of chocolate", "4 spoons of sugar"]

  }
}

$(function() {
  const $recipe = $("#recipe");
  const $ingredients = $("#ingredients");
  // fill the select
  Object.keys(recipies).forEach(key => $recipe.append(`<option value="${key}">${key}</option>`));

  $(".inp").on("input", function() { // change people or recipe
    $ingredients.empty();
    const people = +$("#people").val();
    if (people === 0) return
    const recipe = recipies[$("#recipe").val()];
    if (!recipe) return;

    const base = recipe.base;
    $ingredients.html(
      recipe.ingredients.map(ingredient => {
        let amount = ingredient.match(/\d+/)[0];
        let calc = (amount * people/base).toFixed(2);
        if (parseInt(calc) == calc) calc = parseInt(calc); // remove decimals when not needed
        return `<p>${ingredient.replace(amount,calc)}</p>`
      })
    )
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="recipe" class="inp">
  <option value="">Please select</option>
</select>
<input type="number" value="0" id="people" class="inp">
<div id="ingredients"></div>

user_2957830
Related