HackYourFuture-CPH · najmeh25 · Dec 11, 2024
diff --git a/javascript/javascript2/week1/index.css b/javascript/javascript2/week1/index.css
diff --git a/javascript/javascript2/week1/index.html b/javascript/javascript2/week1/index.html
@@ -0,0 +1,53 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Recipe App</title>
+  <style>
+    .recipe-container {
+      border: 1px solid #ccc;
+      padding: 20px;
+      margin: 20px 0;
+      max-width: 600px;
+    }
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+  </style>
+</head>
+<body>
+  <h1>Recipe App</h1>
+
+  <div id="recipeDisplay"></div>
+
+  <h2>Add a New Recipe</h2>
+  <form id="addRecipeForm">
+    <label for="recipeTitle">Recipe Title:</label>
+    <input type="text" id="recipeTitle" name="recipeTitle" required><br><br>
+
+    <label for="recipeDescription">Description:</label>
+    <textarea id="recipeDescription" name="recipeDescription" required></textarea><br><br>
+
+    <label for="recipePicture">Picture URL:</label>
+    <input type="url" id="recipePicture" name="recipePicture" required><br><br>
+
+    <h3>Ingredients (at least 5):</h3>
+    <div id="ingredientsList">
+      <div class="ingredient">
+        <label>Ingredient Name:</label>
+        <input type="text" class="ingredient-name" required>
+        <label>Amount:</label>
+        <input type="text" class="ingredient-amount" required>
+      </div>
+    </div>
+    <button type="button" id="addIngredientButton">Add Ingredient</button><br><br>
+
+    <button type="submit">Add Recipe</button>
+  </form>
+
+  <script src="index.js"></script>
+</body>
+</html>
diff --git a/javascript/javascript2/week1/index.js 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<recipe.ingredients.length;i++){
+      const ingredient=recipe.ingredients[i];
+      ingredientshtml +="<li>" + ingredient.NAME + "-" +ingredient.AMOUNT+ "</li>";
+
+  }
+  recipeDisplay.innerHTML=`<div><h3>${recipe.title}</h3><img src="${recipe. picture_url}" alt="${recipe.title}">
+  <p>${recipe.description}</P> <ul>${ingredientshtml}<ul>
+  </div>`;
+}
+displayRecipe(recipe);
+
+
+document
+  .getElementById("addIngredientButton")
+  .addEventListener("click", function () {
+    const ingredientsList = document.getElementById("ingredientsList");
+    const ingredientDiv = document.createElement("div");
+    ingredientDiv.className = "ingredient";
+    ingredientDiv.innerHTML = `
+      <label>Ingredient Name:</label>
+      <input type="text" class="ingredient-name" required>
+      <label>Amount:</label>
+      <input type="text" class="ingredient-amount" required>
+    `;
+    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(); 
+  });