recipe library #26
recipe library #26
Conversation
There was a problem hiding this comment.
Super great work Ida! You have made the site prefectly! I really believe that your end results was more or less flawless! I wish I could give more tips and feedback how you could improve but I can't find anything negative to say.
Your code was well structured, good naming, simple in a good way and got the job done! I especially like your ingredients and show instruction function.
If I would have made this site I would have been very proud of my self!
Great work!
| <h1>Recipe Library</h1> | ||
| </header> | ||
|
|
||
| <main> |
There was a problem hiding this comment.
Would this be considered "MAIN". I don't know the answer just wondering form my own sake. I put mine in the header for some reason.
| </header> | ||
|
|
||
| <main> | ||
| <section class="filter-container" id="filter-container"> |
There was a problem hiding this comment.
I don't really know why really but they said that it is best practice to put sorting and filtering in forms.
index.html
Outdated
| <section class="filter-container" id="filter-container"> | ||
| <div class="filer-on-diet" id="filter-on-diet"> | ||
| <h2>Filter on diet</h2> | ||
| <select id="diet-filter"> |
There was a problem hiding this comment.
I liked that you put this in a dropdown to save some space!
index.html
Outdated
| <div class="sort-recipes-ingredients" id="sort-recipes-ingredients"> | ||
| <h2>Sort on ingredients</h2> | ||
| <div class="sort-options" id="sort-options-ingredients"> | ||
| <button class="sort-btn-ingredients" id="btn-descending-ingredients">Descending</button> |
There was a problem hiding this comment.
I like your classnames. Not only here but across your whole project!
There was a problem hiding this comment.
More or less flawless html! Clean code, good naming and nothing unnecessary. Great work.
The only thing worth think about in the future is that it might be a good Idé to put sorting and filtering in forms
| const sortedRecipes = [...recipes] | ||
|
|
||
| sortedRecipes.sort((a, b) => { | ||
| const valueA = key === 'extendedIngredients' ? a[key].length : a[key] |
There was a problem hiding this comment.
I like how you used a ternary operator to make it a bit more compact
| const valueA = key === 'extendedIngredients' ? a[key].length : a[key] | ||
| const valueB = key === 'extendedIngredients' ? b[key].length : b[key] | ||
|
|
||
| if (order === 'asc') { |
There was a problem hiding this comment.
Could you have used a ternary operator here aswell?
| displayRecipes(currentRecipes) | ||
| } | ||
|
|
||
| dietFilter.addEventListener('change', applyFilterAndSort) |
There was a problem hiding this comment.
Nice structure again with the eventlisteners at the end!
|
|
||
| btnRandom.addEventListener('click', showRandomRecipe) | ||
|
|
||
| const fetchRecipes = () => { |
There was a problem hiding this comment.
Is it a good idé to have this in the end. Probably is I just don't know. You have done everythings else super great so I am once again thinking you did it the correct way.
There was a problem hiding this comment.
Super clean, easy to read and great end results with the JS! I have nothing I can find that could be improved🙌
…rage caching to reduce API requests. 3.Show a loading state while fetching data. 4. Cleaned up the css file a bit.
|
Thank you, @simfrisk, for the code review! I really appreciate your comments and have implemented a form for filtering and sorting! |
There was a problem hiding this comment.
Your JavaScript looks super and you’ve chosen descriptive function names. Would love to see some more filters though so that the user can filter on other things than vegan and vegetarian 😊
Love what you did with the instructions for a recipe! Just beware that the text barely fits (the numbers are a tiny bit outside the card). But it’s such a minor thing and I trust that you will want to fix it anyway, so I’m approving.
Keep up the good work!
https://gorgeous-tulumba-a572a2.netlify.app/