Recipe Library - Mimmi #30
Conversation
…no recipes matching the selected filters
…ilter/sorting section for larger screens
…own symbol when options are expanded
…eration to work with data from api
… fetch function to handle errors and to filter out non-valid recipes
…uttons to switch between showing ingredients and instructions
There was a problem hiding this comment.
Hi Mimmi! 👋
I’ve gone through your project and wanted to leave some feedback and suggestions. Overall, this is a well-structured and thoughtfully designed recipe library. Great job!
✅ Strengths
Clean & Semantic HTML – Nice use of headings, sections, and labels. Easy to follow structure.
Responsive CSS Design – The layout adapts well to different screen sizes. Good use of flex and grid.
User-Friendly Filters – The filters are intuitive and organized under collapsible sections. Nice UI touch!
Functional JavaScript – Filtering, sorting, and random recipe features all work smoothly.
LocalStorage Implementation – Great optimization choice to avoid unnecessary API calls.
🛠️ Suggestions for Improvement
Accessibility: Consider adding aria-labels or role attributes for better screen reader support (especially for interactive elements like buttons and dropdowns).
Code Reusability: Some JavaScript functions could be split into smaller, more reusable chunks for clarity and maintenance.
Loading States: You could improve UX by showing a loading indicator when fetching data from the API or while filters are applied.
Error Handling: There is basic error handling, but maybe show user-friendly messages if the fetch fails or no recipes are found (e.g., “No recipes found – try a different filter!”).
⭐ Overall
Really strong project! And I know that you mentaioned that youre not finished. But it is well done and It’s clean, usable, and shows great understanding of the concepts. A few small tweaks and it would be even better. Keep up the great work! <3
There was a problem hiding this comment.
Well-named functions and variables, continue with that 👍 Really good job implementing all the sorting options and filters, and also good job following the design ⭐
Some things to remember:
- Remember to always default to const. Only use let when you bump into issues.
- Clean up your code whenever you’re done. Remove console.logs
Link: https://mimmis-recipe-library.netlify.app/
Some information/functionality:
-All filters and sorting options should work together
-Filter/sorting headings can be clicked to display/hide the different options
-The image and title of a recipe card can be clicked to go to the recipe link
-Toggle between showing the ingredients or instructions by clicking the buttons on each recipe card
Still got some small things to fix but the overall functionality is basically finished.