diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..cbb7b3af2
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5502
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 58f1a8a66..446329f50 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,7 @@
# js-project-recipe-library
+
+A responsive recipe library built with HTML, CSS, and JavaScript.
+
+## 🌐 Live Demo
+Check out the deployed version here:
+👉 [Recipe Library on Netlify](https://recipelibrary-app.netlify.app)
diff --git a/images/pizza.jpg b/images/pizza.jpg
new file mode 100644
index 000000000..0a05c1819
Binary files /dev/null and b/images/pizza.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 000000000..49deae7d9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,165 @@
+
+
+
+
+
+
+ Recipe Library
+
+
+
+
+
+
+
+
+
+
+
+
Filter on kitchen
+
+
+
+
+
+
+
+
+
Sort on time
+
+
+
+
+
+
Need inspiration?
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 000000000..c3b5da214
--- /dev/null
+++ b/script.js
@@ -0,0 +1,344 @@
+// ---------- GLOBAL ELEMENT REFERENCES ----------
+const favBtn = document.getElementById("favBtn")
+const searchInput = document.getElementById("searchInput")
+const searchBtn = document.getElementById("searchBtn")
+const clearSearchBtn = document.getElementById("clearSearchBtn")
+const filterButtons = document.querySelectorAll(".btn-filter")
+const sortButtons = document.querySelectorAll(".btn-sort")
+const randomButton = document.getElementById("randomBtn")
+const recipesContainer = document.getElementById("recipeContainer")
+const loadingIndicator = document.getElementById("loading")
+
+const API_KEY = "dd6e45be84ea4b5ca75f926ee451806c"
+const URL = `https://api.spoonacular.com/recipes/complexSearch?number=25&apiKey=${API_KEY}&cuisine=Thai,Mexican,Mediterranean,Indian&addRecipeInformation=true&addRecipeInstructions=true&fillIngredients=true`
+
+
+// ---------- GLOBAL STATE ----------
+let selectedFilters = []
+let selectedSort = null
+let showFavoritesOnly = false
+let allRecipes = []
+
+
+// ---------- UTILITY FUNCTIONS ----------
+const resetFilters = () => {
+ selectedFilters = []
+ selectedSort = null
+ showFavoritesOnly = false
+ favBtn.classList.remove("active")
+ filterButtons.forEach(btn => btn.classList.remove("selected"))
+ sortButtons.forEach(btn => btn.classList.remove("selected"))
+ randomButton.classList.remove("selected")
+}
+
+
+// Helper to extract and clean ingredients
+const extractIngredients = (recipe) => {
+ const fromExtended = recipe.extendedIngredients?.map(i => i.original.toLowerCase().trim()) || []
+ const fromInstructions = recipe.analyzedInstructions?.flatMap(instr =>
+ instr.steps?.flatMap(step =>
+ step.ingredients?.map(i => i.name.toLowerCase().trim())
+ )
+ ) || []
+ return [...new Set([...fromExtended, ...fromInstructions])]
+}
+
+
+// ---------- DATA FETCHING ----------
+// Fetch data from API or localStorage
+const fetchData = async () => {
+ const lastFetch = localStorage.getItem("lastFetch")
+ const now = Date.now()
+
+ // Use cached recipes if last fetch was under 24 hours ago
+ if (lastFetch && (now - lastFetch < 24 * 60 * 60 * 1000)) {
+ const cachedRecipes = localStorage.getItem("allRecipes")
+ if (cachedRecipes) {
+ try {
+ allRecipes = JSON.parse(cachedRecipes)
+ // Update the UI with cached recipes
+ updateRecipes()
+ loadingIndicator.style.display = "none"
+ return
+ } catch (e) {
+ // If cached data is corrupted → remove it to force fresh fetch
+ localStorage.removeItem("allRecipes")
+ localStorage.removeItem("lastFetch")
+ }
+ }
+ }
+ // Show loading spinner
+ loadingIndicator.style.display = "block"
+ try {
+ const response = await fetch(URL)
+
+ //Check if API quota is reached
+ if (response.status === 402) {
+ recipesContainer.innerHTML = "🚫 API daily quota reached. We've hit our daily request limit for recipe data. Please try again tomorrow or reload later
"
+ return
+ }
+ if (!response.ok) throw new Error(`HTTP ${response.status}`)
+
+ const data = await response.json()
+
+ allRecipes = data.results.map(recipe => ({
+ id: recipe.id,
+ title: recipe.title,
+ cuisine: ((recipe.cuisines?.[0] || "Unknown").charAt(0).toUpperCase() +
+ (recipe.cuisines?.[0] || "Unknown").slice(1).toLowerCase()),
+ readyInMinutes: recipe.readyInMinutes,
+ image: recipe.image,
+ sourceUrl: recipe.sourceUrl,
+ ingredients: extractIngredients(recipe), // Extract ingredients via helper function
+ isFavorite: false
+ }))
+ // Save recipes to localStorage
+ localStorage.setItem("allRecipes", JSON.stringify(allRecipes))
+ localStorage.setItem("lastFetch", now.toString())
+ updateRecipes()
+
+ } catch (err) {
+ // Error handling: use cached data if API fetch fails
+ const cachedRecipes = localStorage.getItem("allRecipes")
+ if (cachedRecipes) {
+ try {
+ allRecipes = JSON.parse(cachedRecipes)
+ updateRecipes()
+ } catch (e) {
+ // If cached data is corrupted → clear it and show error message
+ recipesContainer.innerHTML = "Could not load recipes 😢"
+ localStorage.removeItem("allRecipes")
+ localStorage.removeItem("lastFetch")
+ }
+ } else {
+ // No cached data available → show error message
+ recipesContainer.innerHTML = "Could not load recipes 😢"
+ }
+ } finally {
+ loadingIndicator.style.display = "none"
+ }
+}
+
+
+// ---------- CORE RENDERING FUNCTIONS ----------
+const showRecipes = (recipesArray) => {
+ // Add animation: fade out and scale down before updating content
+ recipesContainer.style.opacity = "0"
+ recipesContainer.style.transform = "scale(0.95)"
+
+ setTimeout(() => {
+ recipesContainer.innerHTML = "" // Clear existing recipes
+
+ if (recipesArray.length === 0) {
+ recipesContainer.innerHTML = `😢 No recipes match your filter, try choosing another one
`
+ } else {
+ recipesArray.forEach(recipe => {
+ recipesContainer.innerHTML += `
+
+
+
${recipe.title}
+
+
Cuisine: ${recipe.cuisine}
+ Time: ${recipe.readyInMinutes} minutes
+
+
Ingredients
+ ${recipe.ingredients.join("
")}
+
+