diff --git a/Calculators/Recipe-Cost-Calculator/README.md b/Calculators/Recipe-Cost-Calculator/README.md new file mode 100644 index 000000000..49fa864c9 --- /dev/null +++ b/Calculators/Recipe-Cost-Calculator/README.md @@ -0,0 +1,16 @@ +#

Recipe Cost Calculator

+ +## Description :- + +This tool enables users to input ingredients and quantities to calculate the total cost of a recipe, facilitating budget-friendly meal planning. +The primary goal of the Recipe Cost Calculator is to empower users to plan meals within their budget by accurately estimating the total cost of a recipe based on the ingredients and quantities required. + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + +![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/9913e8d7-72f5-4e17-b2b3-3bc598b46ea4) diff --git a/Calculators/Recipe-Cost-Calculator/index.html b/Calculators/Recipe-Cost-Calculator/index.html new file mode 100644 index 000000000..76dcb9448 --- /dev/null +++ b/Calculators/Recipe-Cost-Calculator/index.html @@ -0,0 +1,43 @@ + + + + + + Recipe Cost Calculator + + + + +
+

Recipe Cost Calculator

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+

Ingredients List

+ +

Total Cost

+

$0.00

+
+ + + diff --git a/Calculators/Recipe-Cost-Calculator/script.js b/Calculators/Recipe-Cost-Calculator/script.js new file mode 100644 index 000000000..7efafedcc --- /dev/null +++ b/Calculators/Recipe-Cost-Calculator/script.js @@ -0,0 +1,55 @@ +let ingredients = []; +let totalCost = 0; + +function addIngredient() { + const name = document.getElementById('ingredient-name').value; + const quantity = parseFloat(document.getElementById('ingredient-quantity').value); + const unit = document.getElementById('ingredient-unit').value; + const price = parseFloat(document.getElementById('ingredient-price').value); + + if (name && !isNaN(quantity) && !isNaN(price)) { + const ingredient = { + name, + quantity, + unit, + price, + cost: quantity * price + }; + + ingredients.push(ingredient); + totalCost += ingredient.cost; + + updateIngredientList(); + updateTotalCost(); + + document.getElementById('ingredient-form').reset(); + } else { + alert('Please enter valid ingredient details.'); + } +} + +function deleteIngredient(index) { + totalCost -= ingredients[index].cost; + ingredients.splice(index, 1); + updateIngredientList(); + updateTotalCost(); +} + +function updateIngredientList() { + const ingredientList = document.getElementById('ingredient-list'); + ingredientList.innerHTML = ''; + + ingredients.forEach((ingredient, index) => { + const li = document.createElement('li'); + li.innerHTML = ` + ${ingredient.name}: ${ingredient.quantity} ${ingredient.unit} @ $${ingredient.price.toFixed(2)} each - $${ingredient.cost.toFixed(2)} + + `; + ingredientList.appendChild(li); + }); +} + +function updateTotalCost() { + const totalCostElement = document.getElementById('total-cost'); + totalCostElement.textContent = `$${totalCost.toFixed(2)}`; +} diff --git a/Calculators/Recipe-Cost-Calculator/style.css b/Calculators/Recipe-Cost-Calculator/style.css new file mode 100644 index 000000000..72a693878 --- /dev/null +++ b/Calculators/Recipe-Cost-Calculator/style.css @@ -0,0 +1,131 @@ +/* General styles */ +body { + font-family: 'Roboto', sans-serif; + background-color: #223f6b; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +/* Container styling */ +.container { + width: 80%; + max-width: 600px; + margin: 20px auto; + padding: 20px; + background-color: #6772b0; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border-radius: 8px; + text-align: center; +} + +/* Heading styles */ +h1, h2 { + color: #271954; + margin-bottom: 20px; + font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif +} + +/* Form group styling */ +.form-group { + margin-bottom: 15px; + text-align: left; +} + +/* Label styling */ +label { + display: block; + margin-bottom: 5px; + color: #d5cece; + font-size: larger; +} + +/* Input and select styling */ +input[type="text"], +input[type="number"], +select { + width: calc(100% - 16px); + padding: 8px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 1rem; +} + +/* Button styling */ +button { + width: 100%; + padding: 10px; + background-color: #0d3969; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 1rem; + transition: background-color 0.3s; +} + +button:hover { + background-color: #44316e; +} + +/* List styling */ +ul { + list-style: none; + padding: 0; +} + +ul li { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px; + border-bottom: 1px solid #ddd; +} + +ul li:last-child { + border-bottom: none; +} + +/* Delete button styling */ +.delete-btn { + background-color: #dc3545; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; + padding: 2px 5px; + font-size: 0.8rem; + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + transition: background-color 0.3s; +} + +.delete-btn:hover { + background-color: #c82333; +} + +/* Total cost styling */ +#total-cost { + font-size: 1.5rem; + font-weight: bold; + color: #28a745; + margin-top: 20px; +} + +/* Heading hover effect */ +h1:hover, +h2:hover { + text-shadow: 0 0 10px rgba(190, 172, 232, 0.8); +} + +/* Ingredient name hover effect */ +ul li:hover { + text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); +} diff --git a/index.html b/index.html index 3f5ca8a0d..fd9f51c40 100644 --- a/index.html +++ b/index.html @@ -1546,6 +1546,20 @@

This tool allows users to input property details and obtain essential inform +
+
+

Recipe Cost Calculator

+

This tool enables users to input ingredients and quantities to calculate the total cost of a recipe.

+
+ + + + + Source Code + +
+
+

Rectangular Polar Calculator