xxxxxxxxxx82
<!--- gpt : https://chat.openai.com/share/137b0504-a5e2-4d8d-88df-ebf8a7d27063 ---><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ginger Snap Cookies Recipe Calculator</title> <style> label { display: block; margin-bottom: 5px; } </style></head><body> <h2>Ginger Snap Cookies Recipe Calculator</h2> <label for="servingSize">Serving Size:</label> <button onclick="decreaseServingSize()">-</button> <input type="number" id="servingSize" min="1" value="1" onchange="calculateRecipe()"> <button onclick="increaseServingSize()">+</button> <h3>Ingredients:</h3> <div id="ingredients"> <!-- Ingredient amounts will be displayed here dynamically --> </div> <script> // Initial serving size let servingSizeValue = 1; // Ingredients with original amounts const ingredients = [ { name: 'Flour', originalAmount: 2, unit: 'cups' }, { name: 'Sugar', originalAmount: 1, unit: 'cup' }, { name: 'Butter', originalAmount: 0.5, unit: 'cup' }, { name: 'Ginger', originalAmount: 1, unit: 'tsp' }, // Add more ingredients as needed ]; // Function to calculate and display adjusted ingredient amounts function calculateRecipe() { // Get the current serving size servingSizeValue = parseFloat(document.getElementById('servingSize').value); // Clear previous ingredient fields document.getElementById('ingredients').innerHTML = ''; // Calculate the adjusted amounts based on serving size ingredients.forEach(ingredient => { const adjustedAmount = (ingredient.originalAmount * servingSizeValue).toFixed(2); const ingredientField = document.createElement('div'); ingredientField.innerHTML = `${adjustedAmount} ${ingredient.unit} of ${ingredient.name}`; document.getElementById('ingredients').appendChild(ingredientField); }); } // Function to decrease serving size function decreaseServingSize() { if (servingSizeValue > 1) { servingSizeValue--; document.getElementById('servingSize').value = servingSizeValue; calculateRecipe(); } } // Function to increase serving size function increaseServingSize() { servingSizeValue++; document.getElementById('servingSize').value = servingSizeValue; calculateRecipe(); } // Initial calculation on page load calculateRecipe(); </script></body></html>