Assistance with Writing Code for Nutrient Conversion and Entry into Recipe Database

Ask the community
1

Dear Wix Community,

I am working on a Wix website where customers can create recipes. I am seeking assistance with writing the code for converting nutrients based on selected ingredients and their weights, as well as for entering these values into my recipe database.

Specifically, I need help implementing a function in Wix Velo that allows for the calculation of nutrient values based on the selected ingredients and their weights, and subsequently entering these values into my recipe database.

Any help, guidance, or examples would be greatly appreciated.

Thank you in advance for your support!

Best regards, [Philipp]

2

Hi Philipp,

This is definitely doable with Velo! You can either post in the Collaboration category of the forum, or hire a Velo certified developer on the Wix Marketplace.

3

You can start with this little and very simple example…

<!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
            selectedIngredients.push({
                ingredient: selectedIngredient,
                weight: weight,
                nutrients: nutrientResult,
            });

            // Update the displayed information
            updateDisplay();
        }

        function updateDisplay() {
            const ingredientList = document.getElementById("ingredientList");
            const totalNutrients = document.getElementById("totalNutrients");

            // Clear previous content
            ingredientList.innerHTML = "";
            totalNutrients.innerHTML = "";

            // Display selected ingredients
            selectedIngredients.forEach((item) => {
                const listItem = document.createElement("li");
                listItem.textContent = `${item.ingredient} - ${item.weight}g`;
                ingredientList.appendChild(listItem);
            });

            // Calculate total nutrient values
            const total = selectedIngredients.reduce((acc, item) => {
                for (const nutrient in item.nutrients) {
                    acc[nutrient] = (acc[nutrient] || 0) + item.nutrients[nutrient];
                }
                return acc;
            }, {});

            // Display total nutrient values
            for (const nutrient in total) {
                const nutrientItem = document.createElement("div");
                nutrientItem.textContent = `${nutrient}: ${total[nutrient].toFixed(2)}`;
                totalNutrients.appendChild(nutrientItem);
            }
        }
    </script>

</body>
</html>

You can code what ever you want inside an iFrame and then connect with your Wix-Website and control everything from your wix-Website, or even from your wix-Dashboard ?  

Depends on how much fantasy you have, how much effort you put on your program and far you want to go.

Make your own project out of it and work on it.
And when everything is finished —> paste all that code into your HTML-Component on your wix website, connect it and have fun.