js-project-recipe-library by Oscar #21
Conversation
…avascript, styled some more, finished HTML. will add media query later
…cted behavior. The site is now responsive
… and cost. redid cost to be fewer buttons, when selecting diets, multiple can be selected as well as reloading the original recipes if unchecked
…ecipe for a button i created earlier. created a very specific if statement for a combination of sorting that would result in no recipes being shown. will change when i have time
… checked and unchecked. was a problem with sorting by time, as the value of the recipe was higher than the max sorting value of 60. added comment to HMTL
…work, it currently kinda works with loading new recipes but contains duplicates of stored recipes. Reworked the update function to contain the selected- diet/cost/time to make the code shorter. currently iäm also re-declaring let storedRecipes a multitude of times. could be improved, probably. added links to innerHTML. will need to comment and re-comment all code to better understand it and make it easier for others
… the default time filter
… decimals, need to comment code, shall try writing code more concise and learn how that works. This is mostly a message to myself
…3. leave larger values be. complexsearch seems to return recipes with a different structure to randomsearch
…e-worked updateRecipes and fetchData to be MUCH more concise utilizing .map, .filter, ternary operator and the spread operator (...). these are listed in the order from being able to understand to not understand
script.js
Outdated
| @@ -219,7 +218,7 @@ function checkScroll() { | |||
| const isFiltered = | |||
| checkMix.some(checkbox => checkbox.checked) || // Diet filters | |||
| costMix.some(checkbox => checkbox.checked) || // Cost sorting | |||
| (selectedTime && selectedTime === "60") // Only block if time is selected & NOT "60-min" | |||
| (selectedTime && selectedTime === "60") // Only block if time is selected & not "60-min" | |||
There was a problem hiding this comment.
You have selectedTime written here twice which doesn't seem to be neccessary.
There was a problem hiding this comment.
Strange, in my code there's only one line. hmm, i'll commit again i guess
There was a problem hiding this comment.
Good job with this project Oscar!
You've chosen descriptive function names and I can see you spent time on following the design - kudos 👍
Some things to work more on:
Please be consistent with how you define your functions → stick to arrow functions as much as you can. Also, please remove console.log from production code.
Looking through your code, I can’t see you’ve met this requirement 👀:
- Your page should show a useful message to the user in case the daily API quota has been reached
Also, I found a little bug. I’d expect when I check vegetarian and gluten-free that I’d get recipes that are just that - vegetarian and gluten-free. Buuut, I get a recipe including chicken. Please fix this or make sure that only one diet filter is chosen at a time. For the stretch goal regarding this, it’s enough for me if the filter goes well together with the sortings. Speaking of stretch goals, I can “only” see that you’ve done 1-3 which is totally fine but I just wanted to make sure I’m not missing something if you’re aiming for VG. Let me know!
|
Thank you! Right, arrow functions. I don't know why i didn't use it consistently.
|
You should probably fix the styling as well now then so that it's clear that the user picks one diet (if you changed the logic to or instead of and 😇). Apart from that, it looks super! |
|
i think i meant it was OR, so if vegetarian and gluten-free was selected it would still show meat, since one of the diets are correct. it is now AND, so if the same diets are selected, it only shows recipes containing both diets |
#https://js-project-recipe-library.netlify.app
My recipe library:
Still got issues to fix, which will be updated this or the coming week