Technigo · AgnesSj01 · Sep 26, 2025 · Sep 30, 2025 · Oct 3, 2025 · Oct 9, 2025
diff --git a/backup.js b/backup.js
@@ -0,0 +1,81 @@
+//==============JUST SAVING OLD ARRAY IN A BACKUP=========>
+/*const recipes = [
+  {
+    title: "Cheat’s cheesy Focaccia",
+    cuisine: "italy",
+    diet: "vegetarian",
+    time: 40,
+    popularity: 1,
+    img: "./images/pizza.jpg",
+    ingredients: [
+      "500 pack bread mix",
+      "2tbsp. olive oil, plus a little extra for drizzling",
+      "25g parmesan (or vegetarian alternative), grated",
+      "75g dolcelatte cheese (or vegetarian alternative)",
+    ],
+  },
+
+  {
+    title: "Baked Chicken",
+    cuisine: "china",
+    diet: "Gluten free",
+    popularity: 5,
+    time: 35,
+    img: "./images/meat.jpg",
+    ingredients: [
+      "   6 bone-in chicken breast halves, pr 6 chicken thighs and wings skin-on",
+      "1/2 tsp. coarse salt",
+      "1/2 tsp. Mrs.Dash seasoning",
+      "1/4 tsp. freshly grounded black pepper",
+    ],
+  },
+  {
+    title: "Deep Fried Fish Bones",
+    cuisine: "South-East Asia",
+    diet: "dairy free",
+    popularity: 2,
+    time: 10,
+    img: "./images/chips.jpg",
+    ingredients: ["8 small whiting fish or smelt", "4 cups vegetable oil"],
+  },
+  {
+    title: "Sweet and Sour Tofu",
+    cuisine: "china",
+    diet: "vegan",
+    popularity: 3,
+    time: 25,
+    img: "./images/tofu.jpg",
+    ingredients: [
+      "2 cloves of garlic (minced)",
+      "1 onion (diced)",
+      "2 carrots (sliced)",
+      "1 green bell pepper (diced)",
+      "a package of tofu",
+    ],
+  },
+  {
+    title: "American pancakes",
+    cuisine: "american",
+    diet: "gluten free",
+    popularity: 2,
+    time: 20,
+    img: "./images/pancake.jpg",
+    ingredients: [
+      "2 1/4 dl gluten-free flour mix",
+      "2 tsp baking powder",
+      "2 tbsp granulated sugar",
+      "2 1/2 dl milk",
+      "30 g butter",
+    ],
+  },
+];*/
+
+/*//Funktion som körs när användaren klickar på knappen
+const getRandomRecipe = () => {
+  //Slumpar fram ett heltal mellan 0 och antal recept – 1.
+  const randomIndex = Math.floor(Math.random() * recipes.length);
+  //Hämtar det slumpade receptet från listan recipes.
+  const recipe = recipes[randomIndex];
+  //Gör om receptet till HTML (med hjälp av renderSingleResult) och visar det i sidan, i elementet cardsEl.
+  cardsEl.innerHTML = renderSingleResult(recipe);
+};*/
diff --git a/images/aprikos.jpg b/images/aprikos.jpg
diff --git a/images/chips.jpg b/images/chips.jpg
diff --git a/images/fish.jpg b/images/fish.jpg
diff --git a/images/food.png b/images/food.png
diff --git a/images/meat.jpg b/images/meat.jpg
diff --git a/images/pancake.jpg b/images/pancake.jpg
diff --git a/images/pizza.jpg b/images/pizza.jpg
diff --git a/images/tofu.jpg b/images/tofu.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Recipe Library</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <header class="top-nav">
+      <img src="images/aprikos.jpg" alt="aprikos" class="food" />
+      <h1>Recipe Library</h1>
+
+      <div class="search-area">
+        <h2>Search recipes</h2>
+        <input type="text" id="search" placeholder="🔍...." class="search" />
+      </div>
+    </header>
+
+    <section class="filters">
+      <div>
+        <h2>Filter on kitchen</h2>
+        <select id="cuisine" class="kitchen">
+          <option value="all">All</option>
+          <option value="Italian">Italian</option>
+          <option value="american">American</option>
+          <option value="china">China</option>
+          <option value="korean">Korean</option>
+          <option value="southern">Southern</option>
+          <option value="asian">Asian</option>
+          <option value="south american">South american</option>
+          <option value="mexican">Mexican</option>
+          <option value="mediterranean">Mediterranean</option>
+        </select>
+      </div>
+
+      <div>
+        <h2>Filter on Diets</h2>
+        <select id="diet" class="diet">
+          <option value="diet-all">All</option>
+          <option value="vegan">Vegan</option>
+          <option value="vegetarian">Vegetarian</option>
+          <option value="gluten free">Gluten-free</option>
+          <option value="dairy free">Dairy-free</option>
+        </select>
+      </div>
+
+      <div>
+        <h2>Sort on time</h2>
+        <select id="sortTime" class="time">
+          <option value="asc">Ascending (fastest first)</option>
+          <option value="desc">Descending (slowest first)</option>
+        </select>
+      </div>
+
+      <div>
+        <h2>Sort by popularity</h2>
+        <select id="sortPop" class="popular">
+          <option value="most">Most popular</option>
+          <option value="least">Least popular</option>
+        </select>
+      </div>
+      <div>
+        <h2>Random</h2>
+        <button id="btn-random" class="random" data-random="random">
+          Random Recipes
+        </button>
+      </div>
+      <button id="btn-show-all" class="show-all" style="display: none">
+        Show all Recipe again
+      </button>
+    </section>
+
+    <section>
+      <div id="cards" class="recipes-boxes"></div>
+    </section>
+    <script src="script.js"></script>
+  </body>
+</html>