The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Create a recipe cost calculator

Written by

Bernardo Palos

in

Here is a simple and functional Recipe Cost Calculator in HTML, CSS, and JavaScript. You can copy and paste this into your website to let users input ingredients, quantity, and price per unit to calculate the total recipe cost.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Recipe Cost Calculator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 2rem;
      background: #f4f4f4;
    }
    h2 {
      text-align: center;
    }
    table {
      width: 100%;
      margin-bottom: 1rem;
      border-collapse: collapse;
      background: #fff;
    }
    th, td {
      border: 1px solid #ccc;
      padding: 0.75rem;
      text-align: center;
    }
    input {
      width: 100%;
      padding: 0.5rem;
      box-sizing: border-box;
    }
    .add-btn, .calculate-btn {
      padding: 0.7rem 1.5rem;
      background: #28a745;
      color: white;
      border: none;
      cursor: pointer;
      margin-top: 1rem;
    }
    .add-btn {
      background: #007bff;
    }
    #total-cost {
      font-size: 1.5rem;
      font-weight: bold;
      margin-top: 1rem;
    }
  </style>
</head>
<body>

<h2>Recipe Cost Calculator</h2>
<table id="ingredients-table">
  <thead>
    <tr>
      <th>Ingredient</th>
      <th>Quantity</th>
      <th>Unit Price</th>
      <th>Total</th>
      <th>Remove</th>
    </tr>
  </thead>
  <tbody id="ingredients-body">
    <tr>
      <td><input type="text" placeholder="Flour" /></td>
      <td><input type="number" min="0" step="any" placeholder="1" /></td>
      <td><input type="number" min="0" step="any" placeholder="0.50" /></td>
      <td class="item-total">$0.00</td>
      <td><button onclick="removeRow(this)">❌</button></td>
    </tr>
  </tbody>
</table>

<button class="add-btn" onclick="addRow()">➕ Add Ingredient</button>
<button class="calculate-btn" onclick="calculateTotal()">🧮 Calculate Total</button>

<div id="total-cost">Total Recipe Cost: $0.00</div>

<script>
  function addRow() {
    const tableBody = document.getElementById('ingredients-body');
    const newRow = document.createElement('tr');
    newRow.innerHTML = `
      <td><input type="text" placeholder="Ingredient" /></td>
      <td><input type="number" min="0" step="any" placeholder="Quantity" /></td>
      <td><input type="number" min="0" step="any" placeholder="Unit Price" /></td>
      <td class="item-total">$0.00</td>
      <td><button onclick="removeRow(this)">❌</button></td>
    `;
    tableBody.appendChild(newRow);
  }

  function removeRow(button) {
    const row = button.parentElement.parentElement;
    row.remove();
    calculateTotal();
  }

  function calculateTotal() {
    let totalCost = 0;
    const rows = document.querySelectorAll('#ingredients-body tr');

    rows.forEach(row => {
      const qtyInput = row.cells[1].querySelector('input');
      const priceInput = row.cells[2].querySelector('input');
      const itemTotalCell = row.querySelector('.item-total');

      const qty = parseFloat(qtyInput.value) || 0;
      const price = parseFloat(priceInput.value) || 0;
      const itemTotal = qty * price;

      itemTotalCell.textContent = `$${itemTotal.toFixed(2)}`;
      totalCost += itemTotal;
    });

    document.getElementById('total-cost').textContent = `Total Recipe Cost: $${totalCost.toFixed(2)}`;
  }
</script>

</body>
</html>

Features:

  • Add multiple ingredients.

  • Enter quantity and price per unit.

  • Calculates total for each row and grand total.

  • Option to remove any ingredient row.

You can enhance this further by adding currency selection, saving data, or printing options if needed. Let me know if you’d like advanced features.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About