Technigo · SaraEnderborg · Sep 26, 2025 · Sep 26, 2025 · Sep 30, 2025 · Oct 2, 2025
diff --git a/README.md b/README.md
@@ -1 +1,2 @@
 # js-project-recipe-library
+https://saras-js-project-recipe-library.netlify.app/
diff --git a/index.html b/index.html
@@ -0,0 +1,82 @@
+<!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" />
+  </head>
+
+  <body>
+    <main>
+      <h1>Recipe Library</h1>
+
+      <!-- ====== FILTERS / SORT / LUCKY CONTROLS ====== -->
+      <div class="controls">
+
+        <!-- FILTER SECTION -->
+        <section class="filters" id="cuisineFilter">
+          <h2 class="section-title">Filter on kitchen</h2>
+          <div class="filter-buttons">
+            <label class="filter-option">
+              <input checked type="radio" name="cuisine" value="all" />
+              All
+            </label>
+            <label class="filter-option">
+              <input type="radio" name="cuisine" value="asian" />
+              Asian
+            </label>
+            <label class="filter-option">
+              <input type="radio" name="cuisine" value="italian" />
+              Italian
+            </label>
+            <label class="filter-option">
+              <input type="radio" name="cuisine" value="mexican" />
+              Mexican
+            </label>
+            <label class="filter-option">
+              <input type="radio" name="cuisine" value="middle eastern" />
+              Middle Eastern
+            </label>
+            <label class="filter-option">
+              <input type="radio" name="cuisine" value="nordic" />
+              Nordic
+            </label>
+          </div>
+        </section>
+
+        <!-- SORT SECTION -->
+        <section class="sort" id="sortOnTime">
+          <h2 class="section-title">Sort on time</h2>
+          <div class="sort-buttons">
+            <label class="sort-button">
+              <input checked type="radio" name="order" value="desc" />
+              Descending
+            </label>
+            <label class="sort-button">
+              <input type="radio" name="order" value="asc" />
+              Ascending
+            </label>
+          </div>
+        </section>
+
+        <!-- FEELING LUCKY SECTION -->
+        <section class="lucky">
+          <h2 class="section-title">Feeling lucky?</h2>
+          <div class="lucky-button">
+            <button id="random-button" class="random-button">Surprise me!</button>
+          </div>
+        </section>
+      </div>
+
+      <!-- ====== RECIPE CARDS GRID ====== -->
+      <section
+        class="cards"
+        id="cardsContainer"
+        aria-label="Recipe cards grid">
+      </section>
+    </main>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,170 @@
+const cardsContainer = document.getElementById('cardsContainer')
+const cuisineFilter = document.getElementById('cuisineFilter')
+const sortSection = document.getElementById('sortOnTime')
+const randomButton = document.getElementById('random-button')
+
+const API_KEY = 'c0e5e1580c434758805e8f05530e9b26'
+const API_KEY2 = 'd4c7b9ec0f33432ea2aa56c816a17159'
+
+const CACHE_KEY = 'recipes'
+const CACHE_DURATION = 24 * 60 * 60 * 1000 
+
+let recipesArray = []
+
+const params = new URLSearchParams({
+  number: 30,
+  cuisine: 'Asian,Italian,Mexican,Middle Eastern',
+  diet: 'vegan,vegetarian,gluten free',
+  type: 'breakfast,main course,dessert',
+  sort: 'popularity',
+  addRecipeInformation: true,
+  instructionsRequired: true,
+  fillIngredients: true,
+  apiKey: API_KEY
+})
+
+const URL = `https://api.spoonacular.com/recipes/complexSearch?${params.toString()}`
+
+const showCardsContainer = (recipesArray) => {
+  cardsContainer.innerHTML = ''
+
+  if (!recipesArray || recipesArray.length === 0) {
+    cardsContainer.innerHTML = `
+      <div class='empty-message'>
+        <h2>Oops 😅</h2>
+        <p>We couldn't find any recipes for your filter...<br>
+        Try changing it or click <strong>Surprise me!</strong> 🎉</p>
+      </div>  
+    `
+    return
+  }
+
+  recipesArray.forEach((recipe) => {
+    cardsContainer.innerHTML += `
+      <div class='card'>
+        <img src='${recipe.image}' alt='${recipe.title}' />
+        <div class='card-content'>
+          <h3>${recipe.title}</h3>
+          <div class='divider'></div> 
+          <p><strong>Cuisine:</strong> 
+            <span class='cuisine-value'>
+              ${recipe?.cuisines?.length ? recipe.cuisines.join(', ') : 'N/A'}
+            </span>
+          </p>
+          <p><strong>Time:</strong> 
+            <span class='time-value'>${recipe.readyInMinutes} min</span>
+          </p>
+          <div class='divider'></div>   
+          <p class='ingredients-header'>Ingredients:</p>
+          <ul>
+            ${recipe?.extendedIngredients
+              .map(({ name }) => `<li>${name}</li>`)
+              .join('')}
+          </ul>
+        </div>
+      </div>
+    `
+  })
+}
+
+const fetchData = async () => {
+  const cachedData = localStorage.getItem(CACHE_KEY)
+
+  if (cachedData) {
+    try {
+      const { recipes, timestamp } = JSON.parse(cachedData)
+      const isExpired = Date.now() - timestamp > CACHE_DURATION
+      recipesArray = recipes
+
+      if (!isExpired) {
+        showCardsContainer(recipes)
+        return
+      }
+    } catch (error) {
+      console.error('Error parsing cached data:', error)
+      localStorage.removeItem(CACHE_KEY)
+    }
+  }
+
+  try {
+    const res = await fetch(URL)
+
+    if (res.status === 402) {
+      cardsContainer.innerHTML = `
+        <div class='empty-message'>
+          <h2>Daily API limit reached 🚫</h2>
+          <p>Please try again later.</p>
+        </div>`;
+      return; 
+    }
+
+    if (!res.ok) {
+      cardsContainer.innerHTML = `
+        <div class='empty-message'>
+          <h2>Oops 😅</h2>
+          <p>No recipes found...</p>
+        </div>  
+      `
+      throw new Error(`HTTP error! Status: ${res.status}`)
+    }
+
+    const data = await res.json()
+    const recipes = data.results
+    recipesArray = recipes
+
+    localStorage.setItem(
+      CACHE_KEY,
+      JSON.stringify({
+        recipes,
+        timestamp: Date.now()
+      })
+    )
+
+    showCardsContainer(recipes)
+  } catch (error) {
+    console.error('Error occurred:', error)
+  }
+}
+
+fetchData()
+
+const filterOnCuisine = () => {
+  const selected = cuisineFilter.querySelector('input[name="cuisine"]:checked')
+  const selectedCuisine = selected ? selected.value : 'all'
+
+  const filteredRecipes =
+    selectedCuisine === 'all'
+      ? recipesArray
+      : recipesArray.filter((recipe) =>
+          recipe.cuisines
+            .map((cuisine) => cuisine.toLowerCase())
+            .includes(selectedCuisine.toLowerCase())
+        )
+
+  showCardsContainer(filteredRecipes)
+}
+
+const sortOnTime = () => {
+  const selected = sortSection.querySelector('input[name="order"]:checked')
+  const order = selected ? selected.value : 'desc'
+
+  const sorted = [...recipesArray].sort((a, b) => {
+    return order === 'asc'
+      ? a.readyInMinutes - b.readyInMinutes
+      : b.readyInMinutes - a.readyInMinutes
+  })
+
+  showCardsContainer(sorted)
+}
+
+const getRandomRecipe = () => {
+  const randomIndex = Math.floor(Math.random() * recipesArray.length)
+  const randomRecipe = [recipesArray[randomIndex]]
+
+  showCardsContainer(randomRecipe)
+}
+
+cuisineFilter.addEventListener('change', filterOnCuisine)
+sortSection.addEventListener('change', sortOnTime)
+randomButton.addEventListener('click', getRandomRecipe)
+
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		# js-project-recipe-library
		https://saras-js-project-recipe-library.netlify.app/