diff --git a/javascript/javascript2/week1/index.css b/javascript/javascript2/week1/index.css new file mode 100644 index 0000000..e69de29 diff --git a/javascript/javascript2/week1/index.html b/javascript/javascript2/week1/index.html new file mode 100644 index 0000000..3414772 --- /dev/null +++ b/javascript/javascript2/week1/index.html @@ -0,0 +1,53 @@ + + + + + + + Recipe App + + + +

Recipe App

+ +
+ +

Add a New Recipe

+
+ +

+ + +

+ + +

+ +

Ingredients (at least 5):

+
+
+ + + + +
+
+

+ + +
+ + + + \ No newline at end of file diff --git a/javascript/javascript2/week1/index.js b/javascript/javascript2/week1/index.js new file mode 100644 index 0000000..54f671a --- /dev/null +++ b/javascript/javascript2/week1/index.js @@ -0,0 +1,84 @@ +const recipe={ + id: 1, +title: "Gløgg", +picture_url: + "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Gl%C3%B6gg_kastrull.JPG/800px-Gl%C3%B6gg_kastrull.JPG", +ingredients: [ + { NAME: "Orange zest", AMOUNT: "0.5" }, + { NAME: "Water", AMOUNT: "200 ml" }, + { NAME: "Sugar", AMOUNT: "275 g" }, + { NAME: "Whole cloves", AMOUNT: "5" }, + { NAME: "Cinnamon sticks", AMOUNT: "2" }, + { NAME: "Spice", AMOUNT: undefined }, + { NAME: "Bottle of red wine", AMOUNT: "1" }, + { NAME: "Raisins", AMOUNT: "100 g" }, + { NAME: "Slipped Almonds", AMOUNT: "50 g" }, +], +description: "Mix everything, heat it, and you are good to go!", +}; + +function displayRecipe(recipe){ + const recipeDisplay=document.getElementById("recipeDisplay"); + let ingredientshtml=""; + for(let i=0;i"; + + } + recipeDisplay.innerHTML=`

${recipe.title}

${recipe.title} +

${recipe.description}

`; +} +displayRecipe(recipe); + + +document + .getElementById("addIngredientButton") + .addEventListener("click", function () { + const ingredientsList = document.getElementById("ingredientsList"); + const ingredientDiv = document.createElement("div"); + ingredientDiv.className = "ingredient"; + ingredientDiv.innerHTML = ` + + + + + `; + ingredientsList.appendChild(ingredientDiv); + }); + + +document.getElementById("addRecipeForm") + .addEventListener("submit", function (e) { + e.preventDefault(); + + const title = document.getElementById("recipeTitle").value; + const description = document.getElementById("recipeDescription").value; + const picture_url = document.getElementById("recipePicture").value; + + const ingredientElements = document.querySelectorAll(".ingredient"); + const ingredients = []; + for (let i = 0; i < ingredientElements.length; i++) { + const name = ingredientElements[i].querySelector(".ingredient-name").value; + const amount = ingredientElements[i].querySelector(".ingredient-amount").value; + ingredients.push({ NAME: name, AMOUNT: amount }); + } + + if (ingredients.length < 5) { + alert("Please add at least 5 ingredients."); + return; + } + + const newRecipe = { + id: Date.now(), + title, + picture_url, + ingredients, + description, + }; + + + displayRecipe(newRecipe); + alert("New recipe added successfully!"); + document.getElementById("addRecipeForm").reset(); + }); \ No newline at end of file