JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recipe Calculator</title>
</head>
<body>

    <h1>Recipe Calculator</h1>

    <label for="ingredient">Select Ingredient:</label>
    <select id="ingredient">
        <option value="carrot">Carrot</option>
        <option value="broccoli">Broccoli</option>
        <!-- Add more options as needed -->
    </select>

    <label for="weight">Enter Weight (grams):</label>
    <input type="number" id="weight" placeholder="Enter weight">

    <button onclick="calculateNutrients()">Add Ingredient</button>

    <h2>Selected Ingredients</h2>
    <ul id="ingredientList"></ul>

    <h2>Total Nutrient Values</h2>
    <div id="totalNutrients"></div>

    <script>
        let selectedIngredients = [];

        function calculateNutrients() {
            const selectedIngredient = document.getElementById("ingredient").value;
            const weight = parseFloat(document.getElementById("weight").value);

            // Assuming you have a data structure with nutrient values for each ingredient
            const nutrientValues = {
                carrot: {
                    protein: 1,
                    carbs: 10,
                    fat: 0.5,
                },
                broccoli: {
                    protein: 3,
                    carbs: 5,
                    fat: 0.2,
                },
                // Add more nutrient values as needed
            };

            // Calculate nutrient values based on the selected ingredient and weight
            const nutrients = nutrientValues[selectedIngredient];
            const nutrientResult = {
                protein: nutrients.protein * (weight / 100),
                carbs: nutrients.carbs * (weight / 100),
                fat: nutrients.fat * (weight / 100),
            };

            // Add the selected ingredient and its nutrient values to the list
           ...