Technigo · Idahel · Mar 13, 2025 · Mar 13, 2025 · Mar 14, 2025 · Mar 15, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5503
+}
diff --git a/README.md b/README.md
@@ -1 +1,8 @@
 # js-project-recipe-library
+
+To do:
+[] Put filter and sort in a form
+[]Show a message if the API quota is reached.
+[] Use local storage caching to reduce API requests.
+[] Show a loading state while fetching data.
+[] Fix the css
diff --git a/index.html b/index.html
@@ -0,0 +1,61 @@
+<!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 rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
+</head>
+
+<body>
+<header>
+    <h1>Recipe Library</h1>
+</header>
+
+<main>
+    <section class="filter-container" id="filter-container">
+        <form class="recipe-filter-form" id="recipe-filter-form">
+            <div class="filer-on-diet" id="filter-on-diet">             
+                <h2>Filter on diet</h2>         
+                <select id="diet-filter" name="diet">             
+                    <option value="">All Diets</option>             
+                    <option value="vegetarian">Vegetarian</option>             
+                    <option value="vegan">Vegan</option>         
+                </select>         
+            </div>          
+
+            <div class="sort-recipes-ingredients" id="sort-recipes-ingredients">             
+                <h2>Sort on ingredients</h2>             
+                <div class="sort-options" id="sort-options-ingredients">                 
+                    <button type="button" class="sort-btn-ingredients" id="btn-descending-ingredients">Descending</button>                 
+                    <button type="button" class="sort-btn-ingredients" id="btn-ascending-ingredients">Ascending</button>             
+                </div>         
+            </div>
+
+            <div class="sort-recipes" id="sort-recipes">             
+                <h2>Sort on time</h2>             
+                <div class="sort-options" id="sort-options-time">                 
+                    <button type="button" class="sort-btn" id="btn-descending">Descending</button>                 
+                    <button type="button" class="sort-btn" id="btn-ascending">Ascending</button>             
+                </div>         
+            </div>
+
+            <div class="random-recipe">             
+                <h2>What should I eat today?</h2>             
+                <button type="button" class="random-btn" id="btn-random">Get recipe</button>         
+            </div>
+        </form>
+    </section>
+
+    <section class="recipes-container" id="recipes-container">
+    </section>
+</main>
+
+<script src="./script.js"></script>
+
+</div>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,228 @@
+const recipesContainer = document.getElementById('recipes-container')
+const recipeForm = document.getElementById('recipe-filter-form')
+const dietFilter = document.getElementById('diet-filter')
+const btnAscendingIngredients = document.getElementById('btn-ascending-ingredients')
+const btnDescendingIngredients = document.getElementById('btn-descending-ingredients')
+const btnDescending = document.getElementById('btn-descending')
+const btnAscending = document.getElementById('btn-ascending')
+const btnRandom = document.getElementById('btn-random')
+const CACHE_KEY = 'spoonacular_recipes_cache'
+const CACHE_EXPIRY = 24 * 60 * 60 * 1000
+
+const baseUrl = "https://api.spoonacular.com/recipes/random"
+const apiKey = "110e75fc870c4091a4fd4bf706e6efc8"
+const numRecipes = 50
+const url = `${baseUrl}?apiKey=${apiKey}&number=${numRecipes}`
+
+let allRecipes = []
+let currentRecipes = []
+let lastSortAction = []
+
+const displayError = (message) => {
+    recipesContainer.innerHTML = `<p class="error-message">${message}</p>`
+}
+
+const displayLoading = () => {
+    recipesContainer.innerHTML = `<p class="loading-message">Loading recipes... Please wait.</p>`
+}
+
+const createRecipeCard = (recipe) => {
+    const ingredientListItems = recipe.extendedIngredients
+    .map(ingredient => `<li>${ingredient.original}</li>`)
+    .join('')
+    return `
+        <div class="recipe-card" id="${recipe.id}">
+        <img src="${recipe.image}" alt="${recipe.title}" class="recipe-img">
+        <h2>${recipe.title}</h2>
+        <hr>
+        <p class="time-info"><span class="bold">Time:</span> ${recipe.readyInMinutes} minutes</p>
+        <hr>
+        <div class="card-buttons">
+        <div class ="ingredient-list">
+        <button class="ingredient-btn" onclick="toggleIngredients('ingredients-${recipe.id}')">Ingredients</button>
+        <ul id="ingredients-${recipe.id}" class="hidden-ingredients">${ingredientListItems}</ul>
+        </div>
+        <button class="instructions-btn" onclick="showInstructions(${recipe.id})">Show Instructions</button>
+        </div>
+    </div>`
+}
+
+const displayRecipes = (recipes) => {
+    recipesContainer.innerHTML = recipes.map(createRecipeCard).join('') 
+}
+
+const toggleIngredients = (ingredientsId) => {
+    const ingredientsList = document.getElementById(ingredientsId)
+    if (ingredientsList.style.display === 'none' || ingredientsList.style.display === '') {
+        ingredientsList.style.display = 'block'
+    } else {
+        ingredientsList.style.display = 'none'
+    }
+}
+
+const showInstructions = (recipeId) => {
+    const recipe = allRecipes.find(r => r.id === recipeId)
+
+    if (!recipe) {
+        displayError('Instructions not found. Please try again.')
+        return
+    }
+    const recipeCard = document.getElementById(recipeId)
+    const backButton = `<button class="back-button" onclick="displayRecipes(currentRecipes)">Back</button>`
+
+    if (recipe.instructions) {
+            recipeCard.innerHTML = `<h3>Instructions:</h3><p>${recipe.instructions}</p>${backButton}`
+    } else {
+            recipeCard.innerHTML = `<p class="instructions-list">Instructions not available.</p>${backButton}`
+    }
+}
+
+const filterRecipesByDiet = (diet) => {
+ if (!diet) {
+     return allRecipes
+ }
+ return allRecipes.filter(recipe => recipe.hasOwnProperty(diet) && recipe[diet] === true)
+}
+
+const sortRecipes = (recipes, key, order = 'asc') => {
+    if (!recipes || recipes.length === 0) {
+        return []
+    }
+    const sortedRecipes = [...recipes]
+
+    sortedRecipes.sort((a, b) => {
+        const valueA = key === 'extendedIngredients' ? a[key].length : a[key]
+        const valueB = key === 'extendedIngredients' ? b[key].length : b[key]
+
+        if (order === 'asc') {
+            return valueA - valueB
+        } else {
+            return valueB - valueA
+        }
+    })
+    return sortedRecipes
+}
+
+const showRandomRecipe = () => {
+    if(allRecipes.length === 0){
+        displayError('No recipes found. Please try again.')
+        return
+    }
+    const randomIndex = Math.floor(Math.random() * allRecipes.length)
+    const randomRecipe = allRecipes[randomIndex]
+    currentRecipes = [randomRecipe]
+    displayRecipes(currentRecipes)
+}
+
+const applyFilterAndSort = () => {
+    const diet = dietFilter.value
+
+    if (!diet) {
+        currentRecipes = [...allRecipes]
+    }
+
+    let filteredRecipes = filterRecipesByDiet(diet)
+
+    if (filteredRecipes.length === 0) {
+        displayError('No recipes found matching the selected diet. Please try again.')
+        currentRecipes = []
+        return
+    }
+    if (lastSortAction === 'ingredients-asc') {
+        filteredRecipes = sortRecipes(filteredRecipes, 'extendedIngredients', 'asc')
+    } else if (lastSortAction === 'ingredients-desc') {
+        filteredRecipes = sortRecipes(filteredRecipes, 'extendedIngredients', 'desc')
+    } else if (lastSortAction === 'time-asc') {
+        filteredRecipes = sortRecipes(filteredRecipes, 'readyInMinutes', 'asc')
+    } else if (lastSortAction === 'time-desc') {
+        filteredRecipes = sortRecipes(filteredRecipes, 'readyInMinutes', 'desc')
+    }
+    currentRecipes = filteredRecipes
+    displayRecipes(currentRecipes)
+}
+
+const saveToCache = (data) => {
+    const cacheData = {
+        timestamp: new Date().getTime(),
+        recipes: data.recipes
+    }
+    localStorage.setItem(CACHE_KEY, JSON.stringify(cacheData))
+}
+
+const getFromCache = () => {
+    const cachedData = localStorage.getItem(CACHE_KEY)
+    if (!cachedData) return null
+
+    const parsedData = JSON.parse(cachedData)
+    const now = new Date().getTime()
+
+    if (now - parsedData.timestamp > CACHE_EXPIRY) {
+        localStorage.removeItem(CACHE_KEY)
+        return null
+    }
+
+    return parsedData
+}
+
+
+dietFilter.addEventListener('change', applyFilterAndSort)
+
+btnAscendingIngredients.addEventListener('click', () => {
+    lastSortAction = 'ingredients-asc'
+    applyFilterAndSort()
+})
+
+btnDescendingIngredients.addEventListener('click', () => {
+    lastSortAction = 'ingredients-desc'
+    applyFilterAndSort()
+})
+
+btnAscending.addEventListener('click', () => {
+    lastSortAction = 'time-asc'
+    applyFilterAndSort()
+})
+
+btnDescending.addEventListener('click', () => {
+    lastSortAction = 'time-desc'
+    applyFilterAndSort()
+})
+
+btnRandom.addEventListener('click', showRandomRecipe)
+
+const fetchRecipes = () => {
+
+    displayLoading ()
+
+    const cachedData = getFromCache()
+    if (cachedData) {
+        allRecipes = cachedData.recipes
+        currentRecipes = cachedData.recipes
+        displayRecipes(currentRecipes)
+        return
+    }
+
+    fetch (url)
+    .then(response => {
+        if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${error.message}`)
+        }
+        return response.json()
+    })
+    .then ((data) => {
+        allRecipes = data.recipes
+        currentRecipes = data.recipes
+        displayRecipes(currentRecipes)
+
+        saveToCache(data)
+
+    })
+    .catch(error => {
+        if (error.message.includes('quota')) {
+            displayError(`${error.message} You've reached the limit for new recipes today.`)
+        } else {
+            displayError(`Error fetching data: ${error.message}`)
+        }
+    })
+}
+
+fetchRecipes()