First PR for this project #17

govargas · 2025-03-14T11:48:17Z

Hi Christina! This PR implements the Recipe Library I did for this assignment. The project dynamically fetches recipe data from Spoonacular’s /recipes/random endpoint and displays recipe cards with filtering, sorting, random selection, infinite scrolling, and caching.

I implemented—I think—all of the requirements and some stretch goals; I describe these and more in detail in the README file.

If it looks like a lot of code, well, I’m still working to understand everything I did!
I also wish I implemented the search function, but that would have been too much for my brain to grasp right now. Maybe later in the week.

…orizontally

…ate filterRecipes() to filter from the full list, ensuring recipes are restored when filters are cleared. Also update infinite scroll to merge new recipes.

…o write that down

christina-baldwin · 2025-03-14T12:13:54Z

index.html

Super cool that you created your own dropdown! And html looks neat and makes sense.

christina-baldwin · 2025-03-14T12:15:51Z

style.css

+*, *::before, *::after {
+  box-sizing: border-box;
+}
+


I'm curious why you used *::before and *::after? (no feedback just genuinely interested)

It comes from CSS I used in the previous business project. The design looked off without it, and I learned it was good practice for potential pseudo-elements, so I kept it. Removing it in this project distorts the recipe card’s alignment, placement, and borders on both mobile and desktop. Seems like a quick fix tho, so I am eager to learn alternative methods to address these issues.

christina-baldwin · 2025-03-14T12:16:32Z

style.css

+.menu-icon.open span:nth-child(3) {
+  transform: translateY(-9px) rotate(45deg);
+}
+


This is a really cool implementation of the nav hamburger menu!

Glad you like it. I took Technigo's nav hamburger icon as inspiration and used on the first project, the business site. Then used that as a template for this one :)

christina-baldwin · 2025-03-14T12:17:38Z

style.css

Some cool CSS and the file looks organised and I found it easy to read :)

christina-baldwin · 2025-03-14T12:28:44Z

script.js

So I think that not everything needs to be inside the document.addEventListener("DOMContentLoaded") function. It might be a bit more readable if you find a way to break some functions out of there and use DOMContentLoaded when its needed. Unless there is a specific reason that I'm missing.

Thanks. I will definitely look into that!

christina-baldwin · 2025-03-14T12:30:19Z

script.js

+
+  // --- Loading State ---
+  recipesContainer.innerHTML = "<p>Loading recipes...</p>";
+


This is an interesting way of doing this, adding this before the recipes are fetched, its a cool and simple solution in my opinion!

christina-baldwin

I've added a few comments within the code with more specifics. I think this is well made and organised and all the requirements and stretch goals are implemented so great job!

govargas · 2025-03-18T02:24:36Z

Thanks for your thoughtful comments and feedback, Christina!

HIPPIEKICK

I really like what you did with the filters and sorting options, great idea to make it less cluttered! However, I found a little bug when opening the Sort by drop down. When hovering Newest and Rating, it jumps around because of the added border. A solution is to always have a transparent border to start with (and then just change the color on hover). This way we avoid the growing width and the jumping.

Another bug I found is that your Random button doesn’t work if some filters are selected. It’s fine if you want to connect the random recipe with your filters, but make sure to display something useful if you can’t find a matching recipe.

And a third bug:
When choosing Vegetarian and Mediterranean I get like 10 identical recipes. I think it might be a bug with the infinite scrolling?

Don’t forget that we should always default to const. You can always change to let if you bump into errors. Apart from that, your JavaScript looks good and you’ve chosen descriptive function/variable names.

Some things to fix in order to be approved, but with allt this said I think you should be proud of all you have accomplished ⭐

…const usage

…are any matching recipes to randomize based on selected filters

govargas · 2025-03-28T14:21:01Z

Hi Matilda, thanks for the feedback!
I made the following changes based on your request:

Border “jumping around” issue dropdown menu buttons:
I added a default transparent border to the sort buttons as suggested, and extended it to all dropdown buttons since I noticed the jumping effect there as well.

Random button bug when some filters are selected:
I added a check to see if there are any matching recipes in the filtered list. When filtering leaves no matches for the current localStorage (cached for 1 hour on the user’s browser), the app now displays a message: “No matching recipe found for the selected filters. Please reset the filters, select different options or try refreshing the page in a while” instead of trying to pick a random recipe from an empty array.

Duplicate recipe bug when applying filters + infinite scrolling:
I added a deduplication step in the JS when fetching new recipes during infinite scrolling to avoid duplicate entries when filters like Vegetarian and Mediterranean are applied.

const as default:
I updated variable declarations to use const by default unless reassignment was needed. Might have missed some, but I think I changed the crucial ones.

Please let me know if you find this works better or if there’s anything else I need to work on in order to get approved. Thank you!

…lication logic

HIPPIEKICK

Amazing work sorting this out ⭐ Thanks for documenting your changes so well too 😊

govargas and others added 25 commits February 28, 2025 01:31

html and css done, basic js

0ba00d6

js functions added

e34c042

link on readme

396c511

code cleaning

3397ce2

fixed some layout issues

006c648

updated dropdown menus without bordering

9c405fd

updated website for week 6 requirements

acc9e1a

fixed surprise me button alignment

795a203

fixed surprise me button so its icon and text are on the same level h…

4b2a153

…orizontally

minor navbar layout adjustments

c67169a

deleted unnecesary js code line

9dce6c8

updated script for week 7

22e3398

cleared readme.md until new link is up

3080966

change fetch request from 15 recipes to 100

618d54b

fixed card recipe layout in desktop view

6dab343

edited msg when no recipes were found

c55cd23

Refactor filtering: store all fetched recipes in 'allRecipes' and upd…

f5b32b9

…ate filterRecipes() to filter from the full list, ensuring recipes are restored when filters are cleared. Also update infinite scroll to merge new recipes.

clean code

469db67

add spoonacularSettings configuration object to centralize API settings

41c9078

updated readme, also i cleaned the code a commit earlier but forgot t…

316d6e5

…o write that down

implement timestamp-based caching for recipes

eb5ec7b

restored surprise icon which got deleted when cleaning code earlier

0f8ba8e

added comment for api config object

a66367b

edited README

13b621f

Update README.md

c3196d8

christina-baldwin reviewed Mar 14, 2025

View reviewed changes

style.css

Copy link

christina-baldwin Mar 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some cool CSS and the file looks organised and I found it easy to read :)

christina-baldwin reviewed Mar 14, 2025

View reviewed changes

HIPPIEKICK self-assigned this Mar 27, 2025

HIPPIEKICK requested changes Mar 27, 2025

View reviewed changes

govargas added 2 commits March 28, 2025 11:13

Fix border jumping, random button, duplicate recipe bugs, and update …

f8dfa9a

…const usage

added 'try refreshing the page in a while' to the message when there …

34f2d82

…are any matching recipes to randomize based on selected filters

govargas requested a review from HIPPIEKICK March 28, 2025 14:21

fix infinite scrolling: bypass cache for fresh recipes & update dedup…

1ce245c

…lication logic

HIPPIEKICK approved these changes Mar 31, 2025

View reviewed changes


		// --- Loading State ---
		recipesContainer.innerHTML = "<p>Loading recipes...</p>";

First PR for this project #17

Are you sure you want to change the base?

First PR for this project #17

Uh oh!

Conversation

govargas commented Mar 14, 2025

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!

govargas Mar 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

christina-baldwin left a comment

Choose a reason for hiding this comment

Uh oh!

govargas commented Mar 18, 2025

Uh oh!

HIPPIEKICK left a comment

Choose a reason for hiding this comment

Uh oh!

govargas commented Mar 28, 2025

Uh oh!

HIPPIEKICK left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

govargas Mar 18, 2025 •

edited

Loading