Sofie's recipe library #23
Conversation
| } | ||
|
|
||
| .btn-sort:has(:checked) { | ||
| background-color: #FF6589; |
There was a problem hiding this comment.
I really like the styling of your buttons, especially that they change color when checked. I will take that with me to my recipe project!
| } | ||
| } | ||
|
|
||
| .animationBtn { |
There was a problem hiding this comment.
Animation queen! Nice effect on the button.
| @@ -0,0 +1,287 @@ | |||
| * { | |||
| box-sizing: border-box; | |||
There was a problem hiding this comment.
General CSS comment: So clean and easy to understand. Great job! Inspiring!
| // Hide loading message when request finish so its not showing all the time | ||
| loadingMessage.style.display = 'none' | ||
| }) | ||
| } |
There was a problem hiding this comment.
Nice to have some data to fall back on when the daily quota is reached. Looks clean too.
| @@ -0,0 +1,176 @@ | |||
| // This is where I store recipes globally | |||
| let allRecipes = [] | |||
There was a problem hiding this comment.
General comment for the javascript: I think the code is well structured and the naming of functions etc makes it easy to understand what the different parts of the code do.
| </main> | ||
|
|
||
| <!-- Icons and links--> | ||
| <footer> |
|
|
||
| My second project in the JS bootcamp. | ||
|
|
||
| The Recipe Library App is a web app that helps users find recipes based on different filters and sorting options. It pulls real recipe data from the Spoonacular API and dynamically updates the display as users make selections. The app includes a random recipe option, messages when no results are found and a fully responsive design. To improve performance and user experience, I added features like multi-filter functionality, local storage caching, a loading state and interactive recipe instructions. |
There was a problem hiding this comment.
It's great that you included a brief description!
There was a problem hiding this comment.
I really like what you’ve done design-wise, it looks even better than our design to be honest 🤩 A tiny thing would just be to have all elements align to the left - see image. You also have a tiny bug regarding the Recipe instructions. The link is just a string (should be a link I guess?) plus some links are too wide to fit in the card.
Fix this little link bug and you’re good to go!
|
Hej Matilda! Thanks for your feedback. However, im not completely clear on the issue you're refering to with the Recipe Instructions - can you explain more what you mean? |
There was a problem hiding this comment.
Ahhh, I can't recreate the bug with the instructions 😅 I guess it was one recipe that didn't have instructions written out, but rather just a link. And that link was so long that it didn't fit in your card. If you see it, you will know what I mean, but since I can't find a recipe that has this issue now - let's leave it 😄
Here's the link: https://stirring-yeot-236514.netlify.app/
Thanks for doing my review!