Carolinas-recipe-library-pull request #53

carro-barro · 2025-10-09T15:07:48Z

netlify link: https://carolinas-recipe-library.netlify.app/

…but it was a bit hard

… the api

daniellauding

Good job! Like the page and code is clear

daniellauding · 2025-10-11T13:03:25Z

index.html

+        <button
+          class="meal-btn"
+          id="btnAll"
+        >All</button>
+        <button
+          class="meal-btn"
+          id="btnBreakfast"
+        >Breakfast</button>
+        <button
+          class="meal-btn"
+          id="btnLunch"
+        >Lunch</button>
+        <button
+          class="meal-btn"
+          id="btnFika"
+        >Fika</button>
+        <button
+          class="meal-btn"
+          id="btnDinner"
+        >Dinner</button>


I understand why the buttons are broken over multiple lines, but since there’s no nested content or long attributes, it might be cleaner to keep each on a single line for readability.

Like
Button text instead :D

daniellauding · 2025-10-11T13:03:56Z

script.js

+const btnAll = document.getElementById("btnAll")
+const btnBreakfast = document.getElementById("btnBreakfast")
+const btnLunch = document.getElementById("btnLunch")
+const btnFika = document.getElementById("btnFika")
+const btnDinner = document.getElementById("btnDinner")
+const btnAscending = document.getElementById("btnAscending")
+const btnDescending = document.getElementById("btnDescending")
+const mealBtns = document.querySelectorAll(".meal-btn")
+const timeBtns = document.querySelectorAll(".time-btn")
+const randomBtn = document.getElementById("btnRandom")
+const recipeContainer = document.getElementById("recipeContainer")
+const noResultsContainer = document.getElementById("noResultsContainer")
+const loading = document.getElementById("loading")
+const searchInput = document.getElementById("searchBar")
+const searchBtn = document.getElementById("searchBtn")


Clean structure to find the DOM selectors!

daniellauding · 2025-10-11T13:06:57Z

script.js

+      <div class="recipe-card">
+        <img src="${recipe.image}" alt="${recipe.title}">
+        <h3>${recipe.title}</h3>
+        <hr>


Not sure I would do an
here — it introduces an extra DOM element and forces a visual line even if future designs might not include one. Since the goal is just a horizontal divider, it might be more flexible and semantic to use a CSS border or pseudo-element instead. That way, you can easily adjust or remove the line in future design updates without changing the HTML structure.

daniellauding · 2025-10-11T13:07:58Z

script.js

+    const cacheTime = localStorage.getItem("cacheTime")
+
+    const now = Date.now()
+    const sixHours = 6 * 60 * 60 * 1000 // cache duration


nice with setting a duration for cache

daniellauding · 2025-10-11T13:09:20Z

script.js

+btnAll.addEventListener("click", () => { activeFilters.mealType = "All"; filterAndSorting() })
+btnBreakfast.addEventListener("click", () => { activeFilters.mealType = "breakfast"; filterAndSorting() })
+btnLunch.addEventListener("click", () => { activeFilters.mealType = "lunch"; filterAndSorting() })
+btnFika.addEventListener("click", () => { activeFilters.mealType = "fika"; filterAndSorting() })
+btnDinner.addEventListener("click", () => { activeFilters.mealType = "dinner"; filterAndSorting() })
+btnAscending.addEventListener("click", () => { activeFilters.sortOrder = "asc"; filterAndSorting() })
+btnDescending.addEventListener("click", () => { activeFilters.sortOrder = "desc"; filterAndSorting() })
+randomBtn.addEventListener("click", getRandomRecipe)
+searchBtn.addEventListener("click", searchRecipes)
+searchInput.addEventListener("keypress", (e) => { if (e.key === "Enter") searchRecipes() })


Good grouping of event listeners 👍 — one thought is that as this logic scales, it could be more maintainable to encapsulate these within a component or a setup function related to the feature (e.g. initMealFilters() or similar). That way, each feature owns its own event bindings.

Adding on to the comment here.
If you want to refactor this could be an option:

Create a helper function that updates the activeFilters object with the given properties, then run the filterAndSorting function

const applyFilters = updates => { Object.assign(activeFilters, updates) filterAndSorting() }

You can create something called a Map that pairs each button element with its meal type (read more here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)

const mealButtons = new Map([ [btnAll, 'All'], [btnBreakfast, 'breakfast'], [btnLunch, 'lunch'], [btnFika, 'fika'], [btnDinner, 'dinner'] ])

Then loop through the Map
for each [button, mealType] pair, add a click listener
when clicked, it updates activeFilters.mealType and calls filterAndSorting()

mealButtons.forEach((mealType, btn) => { btn.addEventListener('click', () => applyFilters({ mealType })) })

Have a read thru if you want to, for future reference.

JennieDalgren

Really good job with this project. It seems like you had a lot of fun! Nice small details like loading state, spread operator, local storage and cache limit

Keep up the good work!

JennieDalgren · 2025-10-23T20:32:58Z

script.js

+btnAll.addEventListener("click", () => { activeFilters.mealType = "All"; filterAndSorting() })
+btnBreakfast.addEventListener("click", () => { activeFilters.mealType = "breakfast"; filterAndSorting() })
+btnLunch.addEventListener("click", () => { activeFilters.mealType = "lunch"; filterAndSorting() })
+btnFika.addEventListener("click", () => { activeFilters.mealType = "fika"; filterAndSorting() })
+btnDinner.addEventListener("click", () => { activeFilters.mealType = "dinner"; filterAndSorting() })
+btnAscending.addEventListener("click", () => { activeFilters.sortOrder = "asc"; filterAndSorting() })
+btnDescending.addEventListener("click", () => { activeFilters.sortOrder = "desc"; filterAndSorting() })
+randomBtn.addEventListener("click", getRandomRecipe)
+searchBtn.addEventListener("click", searchRecipes)
+searchInput.addEventListener("keypress", (e) => { if (e.key === "Enter") searchRecipes() })


Adding on to the comment here.
If you want to refactor this could be an option:

Create a helper function that updates the activeFilters object with the given properties, then run the filterAndSorting function

const applyFilters = updates => { Object.assign(activeFilters, updates) filterAndSorting() }

You can create something called a Map that pairs each button element with its meal type (read more here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)

const mealButtons = new Map([ [btnAll, 'All'], [btnBreakfast, 'breakfast'], [btnLunch, 'lunch'], [btnFika, 'fika'], [btnDinner, 'dinner'] ])

Then loop through the Map
for each [button, mealType] pair, add a click listener
when clicked, it updates activeFilters.mealType and calls filterAndSorting()

mealButtons.forEach((mealType, btn) => { btn.addEventListener('click', () => applyFilters({ mealType })) })

Have a read thru if you want to, for future reference.

JennieDalgren · 2025-10-23T20:33:59Z

script.js

+const fetchData = async (URL) => {
+  loading.style.display = "block"
+  recipeContainer.innerHTML = ``
+  noResultsContainer.innerHTML = ``
+
+  try {
+    const cachedData = localStorage.getItem("cachedRecipes")
+    const cacheTime = localStorage.getItem("cacheTime")
+
+    const now = Date.now()
+    const sixHours = 6 * 60 * 60 * 1000 // cache duration


JennieDalgren · 2025-10-23T20:36:53Z

script.js

+
+  // Filter by meal type
+  if (activeFilters.mealType && activeFilters.mealType !== "All") {
+    filtered = filtered.filter(recipe => recipe.dishTypes?.includes(activeFilters.mealType))


JennieDalgren · 2025-10-23T20:37:09Z

script.js

+    noResultsContainer.innerHTML = `
+      <div class="no-results-container">
+        <h3>No recipes found for "${activeFilters.mealType}"</h3>
+        <p>Try another filter</p>
+      </div>`


JennieDalgren · 2025-10-23T20:37:25Z

script.js

+    return
+  }
+
+  let filtered = [...recipeInfo]


⭐ using spread operator!

JennieDalgren · 2025-10-23T20:37:51Z

script.js

+    // Use cache if still valid
+    if (cachedData && cacheTime && now - cacheTime < sixHours) {
+      recipeInfo = JSON.parse(cachedData)
+      loading.style.display = "none"


like the way you're handling the loading state

Carolina Oldertz added 13 commits September 23, 2025 17:29

worked on the structure and layout

5e3858e

started slowly with the javascript, tried to figure it out on my own …

f14f796

…but it was a bit hard

added javascript- clickable buttons and a message for each button

155b393

just changed the var names in the javascript

cbe90f3

added more recipes and javascript filtering for meals

96e124a

added random button, fixed the sorting buttons function etc

93bea36

added api url and fixed the filters and recipe rendering to work with…

bbb41f2

… the api

added the max fetch message and 4 stretch goals and comments

0974633

added the netlify link in readme

c3d788b

deleted all the console logs

9703c3a

styled the search feature to look better

1c0e2d4

added placeholder for search bar

7b71755

js fix

1a4fac2

daniellauding reviewed Oct 11, 2025

View reviewed changes

carro-barro changed the title ~~pull request~~ Carolinas-recipe-library-pull request Oct 13, 2025

JennieDalgren self-assigned this Oct 23, 2025

JennieDalgren approved these changes Oct 23, 2025

View reviewed changes

Carolinas-recipe-library-pull request #53

Are you sure you want to change the base?

Carolinas-recipe-library-pull request #53

Uh oh!

Conversation

carro-barro commented Oct 9, 2025

Uh oh!

daniellauding left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JennieDalgren left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants