Technigo · majaengberg02 · Sep 24, 2025 · Sep 24, 2025 · Sep 24, 2025 · Sep 24, 2025
diff --git a/data.js b/data.js
@@ -0,0 +1,14 @@
+function getRecipes() {
+  const xhttp = new XMLHttpRequest();
+  xhttp.open("GET", "https://api.spoonacular.com/recipes/random?apiKey=24c0ad763b794214b472e5a5e70fac09&number=20&includeNutrition=false", false);
+  xhttp.send();
+
+  if (xhttp.status === 200) {
+    const respObj = JSON.parse(xhttp.responseText);
+    return { recipes: respObj.recipes, error: null };
+  } else if (xhttp.status === 402) {
+    return { recipes: [], error: "Daily quota reached. Please try again tomorrow." };
+  } else {
+    return { recipes: [], error: "Something went wrong. Please try again later." };
+  }
+}
diff --git a/images/ruth-georgiev-Q4CLQ1BDybU-unsplash.jpg b/images/ruth-georgiev-Q4CLQ1BDybU-unsplash.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,94 @@
+<!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="styles.css">
+  <script src="data.js" defer></script>
+  <script src="script.js" defer></script>
+</head>
+<body>
+
+  <h1>Recipe Library</h1>
+
+  <section class="filters">
+    <div class="filtername-and-buttons">
+      <h2>Dietary Preference</h2>
+
+      <div class="filter-diet">
+        <input 
+          type="radio" 
+          name="diet" 
+          value="all" 
+          id="all"
+          checked>
+          <label for="all" class="diet-label">All</label>
+
+        <input 
+          type="radio" 
+          name="diet" 
+          value="vegetarian"
+          id="vegetarian">
+          <label for="vegetarian" class="diet-label">Vegetarian</label>
+
+        <input 
+          type="radio" 
+          name="diet" 
+          value="vegan"
+          id="vegan">
+          <label for="vegan" class="diet-label">Vegan</label>
+
+        <input 
+          type="radio" 
+          name="diet" 
+          value="gluten free"
+          id="gluten-free">
+          <label for="gluten-free" class="diet-label">Gluten-Free</label>
+
+        <input 
+          type="radio" 
+          name="diet" 
+          value="dairy free"
+          id="dairy-free">
+          <label for="dairy-free" class="diet-label">Dairy-Free</label>
+
+      </div>
+    </div>
+
+      <div class="filtername-and-buttons">
+        <h2>Sort by Time</h2>
+
+        <div class="sort-time">
+          <input 
+            type="radio" 
+            name="sort-time" 
+            value="desc" 
+            id="sort-desc">
+
+            <label 
+            for="sort-desc" class="time-label">Longest to Shortest</label>
+
+          <input 
+            type="radio" 
+            name="sort-time" 
+            value="asc" 
+            id="sort-asc">
+
+            <label 
+            for="sort-asc" class="time-label">Shortest to Longest</label>
+        </div>
+      </div>
+
+      <div class="filtername-and-buttons">
+        <h2>Not sure?</h2>
+        <button id="random-recipe-btn">Random Recipe</button>
+      </div>
+
+  </section>
+
+
+
+  <section class="recipe-card-container"></section>
+</body>
+</html>
diff --git a/response.json b/response.json
diff --git a/script.js b/script.js
@@ -0,0 +1,98 @@
+document.addEventListener("DOMContentLoaded", () => {
+  // Function to filter and sort recipes, then render them
+  function filterAndSortRecipes() {
+    const dietInput = document.querySelector('input[name="diet"]:checked');
+    const sortInput = document.querySelector('input[name="sort-time"]:checked');
+    const diet = dietInput ? dietInput.value : "all";
+    const sort = sortInput ? sortInput.value : "desc";
+
+
+    // Filter
+    let filtered = recipes;
+    if (diet !== "all") {
+      filtered = recipes.filter(recipe => recipe.diets.includes(diet));
+    }
+
+    // Sort
+    if (sort === "asc") {
+      filtered = filtered.slice().sort((a, b) => a.readyInMinutes - b.readyInMinutes);
+    } else {
+      filtered = filtered.slice().sort((a, b) => b.readyInMinutes - a.readyInMinutes);
+    }
+
+    renderRecipes(filtered);
+  }
+
+  // Event listeners to all filter and sort radio buttons
+  document.querySelectorAll('input[name="diet"], input[name="sort-time"]').forEach(input => {
+    input.addEventListener("change", filterAndSortRecipes);
+  });
+
+  // Render recipes initially
+  filterAndSortRecipes();
+
+  // Event listener for random recipe button
+  const randomBtn = document.getElementById('random-recipe-btn');
+  if (randomBtn) {
+    if (recipes.length === 0) {
+      randomBtn.disabled = true; // Disable button if no recipes
+    } else {
+      randomBtn.addEventListener('click', () => {
+        // Pick a random recipe from the array
+        const randomRecipe = recipes[Math.floor(Math.random() * recipes.length)];
+        // Render only the random recipe
+        renderRecipes([randomRecipe]);
+      });
+    }
+  }
+});
+
+// Fetch recipes from data.js
+const apiResult = getRecipes();
+const recipes = apiResult.recipes || [];
+const apiErrorMessage = apiResult.error || null;
+
+// Function to render recipe cards
+function renderRecipes(recipesArray) {
+  const container = document.querySelector('.recipe-card-container');
+  container.innerHTML = ""; // Clear previous cards
+
+  // Show message when no recipes to display
+  if (!recipesArray || recipesArray.length === 0) {
+    const message = apiErrorMessage
+      ? apiErrorMessage
+      : "No recipes found — try different filters or try again later.";
+    container.innerHTML = `<p class="no-recipes">${message}</p>`;
+    return;
+  }
+
+  recipesArray.forEach(recipe => {
+    const card = document.createElement('article');
+    card.className = 'recipe-card';
+    card.tabIndex = 0; // Makes card focusable for accessibility
+    card.style.cursor = 'pointer'; // Shows pointer on hover
+
+    // Recipe card content
+    let content = `
+      <img class="recipe-images" src="${recipe.image}" alt="${recipe.title}">
+      <h3>${recipe.title}</h3>
+      <hr>
+      <h4>Ready in: ${recipe.readyInMinutes} min | Servings: ${recipe.servings}</h4>
+      ${recipe.diets.length > 0 ? `<h4>Diet: ${recipe.diets.join(', ')}</h4>` : ''}
+      <hr>
+      <h4>Ingredients</h4>
+      <ul>
+        ${recipe.extendedIngredients.map(ing => `<li>${ing.name}</li>`).join('')}
+      </ul>
+    `;
+
+    card.innerHTML = content;
+
+    // Make the whole card clickable
+    card.addEventListener('click', () => {
+      window.open(recipe.sourceUrl, '_blank');
+    });
+
+    container.appendChild(card);
+  });
+}