First PR for this project #17
Conversation
…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
There was a problem hiding this comment.
Super cool that you created your own dropdown! And html looks neat and makes sense.
| *, *::before, *::after { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
There was a problem hiding this comment.
I'm curious why you used *::before and *::after? (no feedback just genuinely interested)
There was a problem hiding this comment.
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.
| .menu-icon.open span:nth-child(3) { | ||
| transform: translateY(-9px) rotate(45deg); | ||
| } | ||
|
|
There was a problem hiding this comment.
This is a really cool implementation of the nav hamburger menu!
There was a problem hiding this comment.
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 :)
There was a problem hiding this comment.
Some cool CSS and the file looks organised and I found it easy to read :)
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Thanks. I will definitely look into that!
|
|
||
| // --- Loading State --- | ||
| recipesContainer.innerHTML = "<p>Loading recipes...</p>"; | ||
|
|
There was a problem hiding this comment.
This is an interesting way of doing this, adding this before the recipes are fetched, its a cool and simple solution in my opinion!
|
Thanks for your thoughtful comments and feedback, Christina! |
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.