Refactor merchant setup page. Split js into two main files

views/merchantSetupPage/controller.js

@@ -0,0 +1,15 @@
+let data = {};
+
+let addIngredients = document.querySelector("#addIngredients");
+let newIngredients = document.querySelector("#newIngredients");
+let createRecipes = document.querySelector("#createRecipes");
+
+let checkValid = (valueToCheck, inputField)=>{
+    if(!validator.ingredient[valueToCheck](inputField.value, createBanner = false)){
+        inputField.classList += " input-error"
+    }else{
+        inputField.classList.remove("input-error");
+    }
+}
+
+ingredientSetup.populateIngredients();

views/merchantSetupPage/ingredientSetup.js

@@ -0,0 +1,214 @@
+let ingredientSetup = {
+    existingIngredientElements: [],
+    newIngredientElements: [],
+
+    populateIngredients: function(){
+        let tBody = document.createElement("tbody");
+    
+        for(let ingredient of ingredients){
+            let row = document.createElement("tr");
+            row.id = ingredient._id;
+        
+            let add = document.createElement("td");
+            let checkbox = document.createElement("input");
+            checkbox.type = "checkbox";
+            add.appendChild(checkbox);
+            row.appendChild(add);
+        
+            let name = document.createElement("td");
+            name.innerText = ingredient.name;
+            row.appendChild(name);
+        
+            let category = document.createElement("td");
+            category.innerText = ingredient.category;
+            row.appendChild(category);
+        
+            let quantity = document.createElement("td");
+            let quantityInput = document.createElement("input");
+            quantityInput.type = "number";
+            quantityInput.step = "0.01";
+            quantityInput.min = "0";
+    
+            quantity.appendChild(quantityInput);
+            row.appendChild(quantity);
+            let unit = document.createElement("td");
+            unit.innerText = ingredient.unitType;
+            row.appendChild(unit);
+        
+            let idField = document.createElement("input");
+            idField.type = "hidden";
+            idField.value = ingredient._id;
+        
+            tBody.appendChild(row);
+            let oldTBody = document.querySelector("#ingredient-display tbody");
+            oldTBody.parentNode.replaceChild(tBody, oldTBody);
+            this.existingIngredientElements.push(row);
+
+            this.displayExistingIngredients();
+        }
+    },
+
+    displayExistingIngredients: function(){
+        addIngredients.style.display = "flex";
+        newIngredients.style.display = "none";
+        createRecipes.style.display = "none";
+    },
+
+    displayNewIngredients: function(){
+        addIngredients.style.display = "none";
+        newIngredients.style.display = "flex";
+        createRecipes.style.display = "none";
+    },
+
+    newIngredientField: function(){
+        let body = document.querySelector("#inputField tbody");
+        let row = document.createElement("tr");
+    
+        let name = document.createElement("td");
+        let nameInput = document.createElement("input");
+        nameInput.type = "text";
+        nameInput.onblur = ()=>{checkValid("name", nameInput)};
+        name.appendChild(nameInput);
+        row.appendChild(name);
+    
+        let category = document.createElement("td");
+        let categoryInput = document.createElement("input");
+        categoryInput.type = "text"
+        categoryInput.onblur = ()=>{checkValid("category", categoryInput)};
+        category.appendChild(categoryInput);
+        row.appendChild(category);
+    
+        let quantity = document.createElement("td");
+        let quantityInput = document.createElement("input");
+        quantityInput.type = "number";
+        quantityInput.step = "0.01";
+        quantityInput.onblur = ()=>{checkValid("quantity", quantityInput)};
+        quantity.appendChild(quantityInput);
+        row.appendChild(quantity);
+    
+        let unit = document.createElement("td");
+        let unitInput = document.createElement("input");
+        unitInput.type = "text";
+        unitInput.onblur = ()=>{checkValid("unit", unitInput)};
+        unit.appendChild(unitInput);
+        row.appendChild(unit);
+    
+        let removeTd = document.createElement("td");
+        let removeButton = document.createElement("button");
+        removeButton.innerText = "-";
+        removeButton.onclick = ()=>{this.removeRow(row)};
+        removeTd.appendChild(removeButton);
+        row.appendChild(removeTd);
+    
+        body.appendChild(row);
+        this.newIngredientElements.push(row);
+    },
+
+    removeRow: function(row){
+        for(let i = 0; i < this.newIngredientElements.length; i++){
+            if(this.newIngredientElements[i] === row){
+                this.newIngredientElements.splice(i, 1);
+            }
+        }
+        row.parentNode.removeChild(row);
+    },
+
+    //refactor
+    //nothin should run unless everything is valid
+    createIngredientsList: function(){
+        data.ingredients = [];
+        for(let ingredient of this.existingIngredientElements){
+            if(ingredient.children[0].children[0].checked){
+                data.ingredients.push({
+                    id: ingredient.id,
+                    name: ingredient.children[1].textContent,
+                    quantity: ingredient.children[3].children[0].value,
+                    unitType: ingredient.children[4].textContent
+                });
+            }
+        }
+    
+        let newIngredient = [];
+        let newIngredientQuantity = [];
+        for(let ingredient of this.newIngredientElements){
+            newIngredient.push({
+                name: ingredient.children[0].children[0].value,
+                category: ingredient.children[1].children[0].value,
+                unitType: ingredient.children[3].children[0].value
+            });
+            newIngredientQuantity.push({
+                name: ingredient.children[0].children[0].value,
+                quantity: ingredient.children[2].children[0].value
+            });
+        }
+    
+        let isValid = true;
+        for(let i = 0; i < newIngredient.length; i++){
+            if(!validator.ingredient.all(newIngredient[i], newIngredientQuantity[i].quantity)){
+                isValid = false;
+                data.ingredients = [];
+                break;
+            }
+        }
+    
+        if(isValid){
+            axios.post("/ingredients/create", newIngredient)
+                .then((result)=>{
+                    for(let ingredient of result.data){
+                        let newIngredient = {
+                            id: ingredient._id,
+                            name: ingredient.name,
+                            unitType: ingredient.unitType
+                        }
+    
+                        for(let item of newIngredientQuantity){
+                            if(ingredient.name === item.name){
+                                newIngredient.quantity = item.quantity;
+                            }
+                        }
+    
+                        data.ingredients.push(newIngredient);
+                    }
+                    banner.createNotification("All ingredients have been created and added to your inventory");
+                    recipeSetup.createRecipePage();
+                })
+                .catch((err)=>{
+                    banner.createError("There has been an error and your ingredients have not been saved");
+                    console.log(err);
+                });
+        }
+    },
+
+    addRecipeIngredientField: function(){
+        let body = document.querySelector("#recipes tbody");
+    
+        let row = document.createElement("tr");
+        body.appendChild(row);
+    
+        let ingTd = document.createElement("td");
+        row.appendChild(ingTd);
+        let ingName = document.createElement("select");
+        for(let ingredient of data.ingredients){
+            let newOption = document.createElement("option");
+            newOption.innerText = ingredient.name;
+            newOption.value = ingredient.id;
+            ingName.appendChild(newOption);
+        }
+        ingTd.appendChild(ingName);
+    
+        let quantTd = document.createElement("td");
+        row.appendChild(quantTd);
+        let ingQuant = document.createElement("input");
+        ingQuant.type = "number";
+        ingQuant.step = "0.01";
+        ingQuant.min = "0";
+        quantTd.appendChild(ingQuant);
+    
+        let removeTd = document.createElement("td");
+        row.appendChild(removeTd);
+        let removeButton = document.createElement("button");
+        removeButton.innerText = "-";
+        removeButton.onclick = ()=>{row.parentNode.removeChild(row)};
+        removeTd.appendChild(removeButton);
+    }
+};

views/merchantSetupPage/merchantSetup.ejs

@@ -29,7 +29,7 @@
                 <tbody></tbody>
             </table>
 
-            <button onclick="updateState(1)">Next</button>
+            <button onclick="ingredientSetup.displayNewIngredients()">Next</button>
         </div>
 
         <div id="newIngredients" class="container hide">
@@ -49,9 +49,9 @@
                 </thead>
                 <tbody></tbody>
             </table>
-            <button onclick="newIngredientField()">+</button>
-            <button onclick="createIngredientsList()">Create Ingredients</button>
-            <button onclick="updateState(-1)">Back</button>
+            <button onclick="ingredientSetup.newIngredientField()">+</button>
+            <button onclick="ingredientSetup.createIngredientsList()">Create Ingredients</button>
+            <button onclick="ingredientSetup.displayExistingIngredients()">Back</button>
         </div>
 
         <div id="createRecipes" class="container hide">
@@ -70,9 +70,9 @@
                 <tbody></tbody>
             </table>
 
-            <button onclick="addRecipeIngredientField()">+</button>
+            <button onclick="recipeSetup.addRecipeIngredientField()">+</button>
             <button id="next"></button>
-            <button id="previous" onclick="changeRecipe(-1)">Previous Recipe</button>
+            <button id="previous" onclick="recipeSetup.changeRecipe(-1)">Previous Recipe</button>
         </div>
 
         <script>
@@ -81,7 +81,9 @@
         </script>
         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
         <script src="../shared/validation.js"></script>
-        <script src="/merchantSetupPage/merchantSetup.js"></script>
+        <script src="/merchantSetupPage/recipeSetup.js"></script>
+        <script src="/merchantSetupPage/ingredientSetup.js"></script>
+        <script src="/merchantSetupPage/controller.js"></script>
     </body>
 </html>
 

views/merchantSetupPage/merchantSetup.js

@@ -1,363 +1,3 @@
-let state = 0;
-let data = {};
 
-let addIngredients = document.querySelector("#addIngredients");
-let newIngredients = document.querySelector("#newIngredients");
-let createRecipes = document.querySelector("#createRecipes");
-let existingIngredientElements = [];
-let newIngredientElements = [];
-let recipeData = [];
-let recipeDataIndex = 0;
 
-for(let recipe of recipes.elements){
-    recipeData.push(
-        {
-            id: recipe.id,
-            name: recipe.name,
-            ingredients: []
-        }
-    )
-}
 
-//refactor
-//buttons should run a function which should call the state update, not the other way around
-let updateState = (num)=>{
-    state += num;
-    if(state === 0){
-        addIngredients.style.display = "flex";
-        newIngredients.style.display = "none";
-        createRecipes.style.display = "none";
-    }else if(state === 1){
-        addIngredients.style.display = "none";
-        newIngredients.style.display = "flex";
-        createRecipes.style.display = "none";
-    }else if(state === 2){
-        addIngredients.style.display = "none";
-        newIngredients.style.display = "none";
-        createRecipes.style.display = "flex";
-    }
-}
-
-//Ingredient functions
-let populateIngredients = ()=>{
-    let tBody = document.createElement("tbody");
-
-    for(let ingredient of ingredients){
-        let row = document.createElement("tr");
-        row.id = ingredient._id;
-    
-        let add = document.createElement("td");
-        let checkbox = document.createElement("input");
-        checkbox.type = "checkbox";
-        add.appendChild(checkbox);
-        row.appendChild(add);
-    
-        let name = document.createElement("td");
-        name.innerText = ingredient.name;
-        row.appendChild(name);
-    
-        let category = document.createElement("td");
-        category.innerText = ingredient.category;
-        row.appendChild(category);
-    
-        let quantity = document.createElement("td");
-        let quantityInput = document.createElement("input");
-        quantityInput.type = "number";
-        quantityInput.step = "0.01";
-        quantityInput.min = "0";
-
-        quantity.appendChild(quantityInput);
-        row.appendChild(quantity);
-        let unit = document.createElement("td");
-        unit.innerText = ingredient.unitType;
-        row.appendChild(unit);
-    
-        let idField = document.createElement("input");
-        idField.type = "hidden";
-        idField.value = ingredient._id;
-    
-        tBody.appendChild(row);
-        let oldTBody = document.querySelector("#ingredient-display tbody");
-        oldTBody.parentNode.replaceChild(tBody, oldTBody);
-        existingIngredientElements.push(row);
-    }
-}
-
-let newIngredientField = ()=>{
-    let body = document.querySelector("#inputField tbody");
-    let row = document.createElement("tr");
-
-    let name = document.createElement("td");
-    let nameInput = document.createElement("input");
-    nameInput.type = "text";
-    nameInput.onblur = ()=>{checkValid("name", nameInput)};
-    name.appendChild(nameInput);
-    row.appendChild(name);
-
-    let category = document.createElement("td");
-    let categoryInput = document.createElement("input");
-    categoryInput.type = "text"
-    categoryInput.onblur = ()=>{checkValid("category", categoryInput)};
-    category.appendChild(categoryInput);
-    row.appendChild(category);
-
-    let quantity = document.createElement("td");
-    let quantityInput = document.createElement("input");
-    quantityInput.type = "number";
-    quantityInput.step = "0.01";
-    quantityInput.onblur = ()=>{checkValid("quantity", quantityInput)};
-    quantity.appendChild(quantityInput);
-    row.appendChild(quantity);
-
-    let unit = document.createElement("td");
-    let unitInput = document.createElement("input");
-    unitInput.type = "text";
-    unitInput.onblur = ()=>{checkValid("unit", unitInput)};
-    unit.appendChild(unitInput);
-    row.appendChild(unit);
-
-    let removeTd = document.createElement("td");
-    let removeButton = document.createElement("button");
-    removeButton.innerText = "-";
-    removeButton.onclick = ()=>{removeRow(row)};
-    removeTd.appendChild(removeButton);
-    row.appendChild(removeTd);
-
-    body.appendChild(row);
-    newIngredientElements.push(row);
-}
-
-let removeRow = (row)=>{
-    for(let i = 0; i < newIngredientElements.length; i++){
-        if(newIngredientElements[i] === row){
-            newIngredientElements.splice(i, 1);
-        }
-    }
-    row.parentNode.removeChild(row);
-}
-
-//refactor
-//nothin should run unless everything is valid
-let createIngredientsList = ()=>{
-    data.ingredients = [];
-    for(let ingredient of existingIngredientElements){
-        if(ingredient.children[0].children[0].checked){
-            data.ingredients.push({
-                id: ingredient.id,
-                name: ingredient.children[1].textContent,
-                quantity: ingredient.children[3].children[0].value,
-                unitType: ingredient.children[4].textContent
-            });
-        }
-    }
-
-    let newIngredient = [];
-    let newIngredientQuantity = [];
-    for(let ingredient of newIngredientElements){
-        newIngredient.push({
-            name: ingredient.children[0].children[0].value,
-            category: ingredient.children[1].children[0].value,
-            unitType: ingredient.children[3].children[0].value
-        });
-        newIngredientQuantity.push({
-            name: ingredient.children[0].children[0].value,
-            quantity: ingredient.children[2].children[0].value
-        });
-    }
-
-    let isValid = true;
-    for(let i = 0; i < newIngredient.length; i++){
-        if(!validator.ingredient.all(newIngredient[i], newIngredientQuantity[i].quantity)){
-            isValid = false;
-            data.ingredients = [];
-            break;
-        }
-    }
-
-    if(isValid){
-        axios.post("/ingredients/create", newIngredient)
-            .then((result)=>{
-                for(let ingredient of result.data){
-                    let newIngredient = {
-                        id: ingredient._id,
-                        name: ingredient.name,
-                        unitType: ingredient.unitType
-                    }
-
-                    for(let item of newIngredientQuantity){
-                        if(ingredient.name === item.name){
-                            newIngredient.quantity = item.quantity;
-                        }
-                    }
-
-                    data.ingredients.push(newIngredient);
-                }
-                banner.createNotification("All ingredients have been created and added to your inventory");
-                updateState(1);
-                showRecipe();
-            })
-            .catch((err)=>{
-                banner.createError("There has been an error and your ingredients have not been saved");
-                console.log(err);
-            });
-    }
-}
-
-//Recipe functions
-let showRecipe = ()=>{
-    let title = document.querySelector("#recipeName");
-    title.innerText = recipeData[recipeDataIndex].name;
-
-    let body = document.querySelector("#recipes tbody");
-    for(let ing of recipeData[recipeDataIndex].ingredients){
-        let row = document.createElement("tr");
-        body.appendChild(row);
-
-        let ingTd = document.createElement("td");
-        row.appendChild(ingTd);
-        let ingName = document.createElement("select");
-        for(let ingredient of data.ingredients){
-            let newOption = document.createElement("option");
-            newOption.innerText = ingredient.name;
-            newOption.value = ingredient.id;
-            if(ingredient.id === ing.id){
-                newOption.selected = "selected";
-            }
-            ingName.appendChild(newOption);
-        }
-        ingTd.appendChild(ingName);
-
-        let quantTd = document.createElement("td");
-        row.appendChild(quantTd);
-        let ingQuant = document.createElement("input");
-        ingQuant.type = "number";
-        ingQuant.step = "0.01";
-        ingQuant.value = ing.quantity;
-        quantTd.appendChild(ingQuant);
-    }
-
-    let nextButton = document.querySelector("#next");
-    if(recipeDataIndex === recipeData.length - 1){
-        nextButton.innerText = "Finish";
-        nextButton.onclick = submitAll;
-    }else{
-        nextButton.innerText = "Next Recipe";
-        nextButton.onclick = ()=>{changeRecipe(1)};
-    }
-
-    let previousButton = document.querySelector("#previous");
-    if(recipeDataIndex === 0){
-        previousButton.style.display = "none";
-    }else{
-        previousButton.style.display = "inline-block";
-    }
-}
-
-let addRecipeIngredientField = ()=>{
-    let body = document.querySelector("#recipes tbody");
-
-    let row = document.createElement("tr");
-    body.appendChild(row);
-
-    let ingTd = document.createElement("td");
-    row.appendChild(ingTd);
-    let ingName = document.createElement("select");
-    for(let ingredient of data.ingredients){
-        let newOption = document.createElement("option");
-        newOption.innerText = ingredient.name;
-        newOption.value = ingredient.id;
-        ingName.appendChild(newOption);
-    }
-    ingTd.appendChild(ingName);
-
-    let quantTd = document.createElement("td");
-    row.appendChild(quantTd);
-    let ingQuant = document.createElement("input");
-    ingQuant.type = "number";
-    ingQuant.step = "0.01";
-    ingQuant.min = "0";
-    quantTd.appendChild(ingQuant);
-
-    let removeTd = document.createElement("td");
-    row.appendChild(removeTd);
-    let removeButton = document.createElement("button");
-    removeButton.innerText = "-";
-    removeButton.onclick = ()=>{row.parentNode.removeChild(row)};
-    removeTd.appendChild(removeButton);
-}
-
-let changeRecipe = (num)=>{
-    let body = document.querySelector("#recipes tbody");
-
-    let recipeIngredients = [];
-    while(body.children.length > 0){
-        let row = body.firstChild;
-        recipeIngredients.push({
-            id: row.children[0].children[0].value,
-            quantity: row.children[1].children[0].value
-        });
-        recipeData[recipeDataIndex].ingredients = recipeIngredients;
-
-        body.removeChild(row);
-    }
-    recipeDataIndex += num;
-    showRecipe();
-}
-
-let submitAll = ()=>{
-    let body = document.querySelector("#recipes tbody");
-    data.recipes = [];
-
-    let recipeIngredients = [];
-    while(body.children.length > 0){
-        let row = body.firstChild;
-        recipeIngredients.push({
-            id: row.children[0].children[0].value,
-            quantity: row.children[1].children[0].value
-        });
-        recipeData[recipeDataIndex].ingredients = recipeIngredients;
-
-        body.removeChild(row);
-    }
-
-    for(let recipe of recipeData){
-        let newRecipe = {
-            cloverId: recipe.id,
-            name: recipe.name,
-            ingredients: []
-        };
-        for(let ingredient of recipe.ingredients){
-            newRecipe.ingredients.push({
-                id: ingredient.id,
-                quantity: ingredient.quantity
-            });
-        }
-        data.recipes.push(newRecipe);
-    }
-    
-
-    let form = document.createElement("form");
-    form.method = "post";
-    form.action = "/merchant/create"
-    
-    let dataInput = document.createElement("input");
-    dataInput.type = "hidden";
-    dataInput.name = "data";
-    dataInput.value = JSON.stringify(data);
-
-    form.appendChild(dataInput);
-    document.body.appendChild(form);
-    form.submit();
-}
-
-let checkValid = (valueToCheck, inputField)=>{
-    console.log(inputField.value);
-    if(!validator.ingredient[valueToCheck](inputField.value, createBanner = false)){
-        inputField.classList += " input-error"
-    }else{
-        inputField.classList.remove("input-error");
-    }
-}
-
-populateIngredients();
-updateState(0);

views/merchantSetupPage/recipeSetup.js

@@ -0,0 +1,167 @@
+let recipeSetup = {
+    recipeData: [],
+    recipeDataIndex: 0,
+
+    createRecipePage: function(){
+        addIngredients.style.display = "none";
+        newIngredients.style.display = "none";
+        createRecipes.style.display = "flex";
+
+        for(let recipe of recipes.elements){
+            this.recipeData.push(
+                {
+                    id: recipe.id,
+                    name: recipe.name,
+                    ingredients: []
+                }
+            )
+        }
+
+        this.showRecipe();
+    },
+
+    showRecipe: function(){
+        let title = document.querySelector("#recipeName");
+        title.innerText = this.recipeData[this.recipeDataIndex].name;
+    
+        let body = document.querySelector("#recipes tbody");
+        for(let ing of this.recipeData[this.recipeDataIndex].ingredients){
+            let row = document.createElement("tr");
+            body.appendChild(row);
+    
+            let ingTd = document.createElement("td");
+            row.appendChild(ingTd);
+            let ingName = document.createElement("select");
+            for(let ingredient of data.ingredients){
+                let newOption = document.createElement("option");
+                newOption.innerText = ingredient.name;
+                newOption.value = ingredient.id;
+                if(ingredient.id === ing.id){
+                    newOption.selected = "selected";
+                }
+                ingName.appendChild(newOption);
+            }
+            ingTd.appendChild(ingName);
+    
+            let quantTd = document.createElement("td");
+            row.appendChild(quantTd);
+            let ingQuant = document.createElement("input");
+            ingQuant.type = "number";
+            ingQuant.step = "0.01";
+            ingQuant.value = ing.quantity;
+            quantTd.appendChild(ingQuant);
+        }
+    
+        let nextButton = document.querySelector("#next");
+        if(this.recipeDataIndex === this.recipeData.length - 1){
+            nextButton.innerText = "Finish";
+            nextButton.onclick = ()=>{this.submitAll()};
+        }else{
+            nextButton.innerText = "Next Recipe";
+            nextButton.onclick = ()=>{this.changeRecipe(1)};
+        }
+    
+        let previousButton = document.querySelector("#previous");
+        if(this.recipeDataIndex === 0){
+            previousButton.style.display = "none";
+        }else{
+            previousButton.style.display = "inline-block";
+        }
+    },
+
+    changeRecipe: function(num){
+        let body = document.querySelector("#recipes tbody");
+    
+        let recipeIngredients = [];
+        while(body.children.length > 0){
+            let row = body.firstChild;
+            recipeIngredients.push({
+                id: row.children[0].children[0].value,
+                quantity: row.children[1].children[0].value
+            });
+            this.recipeData[this.recipeDataIndex].ingredients = recipeIngredients;
+    
+            body.removeChild(row);
+        }
+        this.recipeDataIndex += num;
+        this.showRecipe();
+    },
+
+    submitAll: function(){
+        let body = document.querySelector("#recipes tbody");
+        data.recipes = [];
+    
+        let recipeIngredients = [];
+        while(body.children.length > 0){
+            let row = body.firstChild;
+            recipeIngredients.push({
+                id: row.children[0].children[0].value,
+                quantity: row.children[1].children[0].value
+            });
+            this.recipeData[this.recipeDataIndex].ingredients = recipeIngredients;
+    
+            body.removeChild(row);
+        }
+    
+        for(let recipe of this.recipeData){
+            let newRecipe = {
+                cloverId: recipe.id,
+                name: recipe.name,
+                ingredients: []
+            };
+            for(let ingredient of recipe.ingredients){
+                newRecipe.ingredients.push({
+                    id: ingredient.id,
+                    quantity: ingredient.quantity
+                });
+            }
+            data.recipes.push(newRecipe);
+        }
+        
+        let form = document.createElement("form");
+        form.method = "post";
+        form.action = "/merchant/create"
+        
+        let dataInput = document.createElement("input");
+        dataInput.type = "hidden";
+        dataInput.name = "data";
+        dataInput.value = JSON.stringify(data);
+    
+        form.appendChild(dataInput);
+        document.body.appendChild(form);
+        form.submit();
+    },
+
+    addRecipeIngredientField: function(){
+        let body = document.querySelector("#recipes tbody");
+    
+        let row = document.createElement("tr");
+        body.appendChild(row);
+    
+        let ingTd = document.createElement("td");
+        row.appendChild(ingTd);
+        let ingName = document.createElement("select");
+        for(let ingredient of data.ingredients){
+            let newOption = document.createElement("option");
+            newOption.innerText = ingredient.name;
+            newOption.value = ingredient.id;
+            ingName.appendChild(newOption);
+        }
+        ingTd.appendChild(ingName);
+    
+        let quantTd = document.createElement("td");
+        row.appendChild(quantTd);
+        let ingQuant = document.createElement("input");
+        ingQuant.type = "number";
+        ingQuant.step = "0.01";
+        ingQuant.min = "0";
+        quantTd.appendChild(ingQuant);
+    
+        let removeTd = document.createElement("td");
+        row.appendChild(removeTd);
+        let removeButton = document.createElement("button");
+        removeButton.innerText = "-";
+        removeButton.onclick = ()=>{row.parentNode.removeChild(row)};
+        removeTd.appendChild(removeButton);
+    }
+}