Code for review Sofia #27
Conversation
Reset to working
There was a problem hiding this comment.
Love your really nice looking images 😍 and your page is beautiful as always, really good job!
I like that you get to the recipe link when you click the recipe card.
Infinite scroll is really cool.
Gif´s are wonderful for error messages 😂
Added some comments in the code.
script.js
Outdated
| cacheTimestamp && | ||
| Date.now() - cacheTimestamp < cacheExpiry | ||
| ) { | ||
| console.log("Using cached recipes"); |
There was a problem hiding this comment.
Consider removing console.logs in finished projects, good practice.
script.js
Outdated
| } | ||
|
|
||
| const data = await response.json(); | ||
| console.log("Fetched new recipes from API"); |
There was a problem hiding this comment.
Consider removing console.logs in finished projects, good practice.
| } | ||
|
|
||
| try { | ||
| const response = await fetch(API_URL); |
There was a problem hiding this comment.
I never get new fetched recipes from the API, only the same cached everytime. Maybe this fetch need to be handled before the cached ones?
| ).map((el) => el.value), | ||
| }; | ||
|
|
||
| return recipes.filter((recipe) => { |
There was a problem hiding this comment.
Seems to be something wrong with the diets/cuisine filter. If I check any other filter then Vegan I get an error, even when I see there is a gluten-free at display. Non of the cuisine filters get a match.
| (High to Low)</label | ||
| > | ||
| <label | ||
| ><input type="radio" name="sort" value="popularity-desc" /> |
There was a problem hiding this comment.
I suggest you add (High to Low) on populaity as the other sorting options for consistency.
><input type="radio" name="sort" value="popularity-desc" /> Popularity (High to Low)</label >
| display: flex; | ||
| } | ||
|
|
||
| .random-btn:hover { |
| z-index: 2; | ||
| } | ||
|
|
||
| .filter-dropdown .dropdown-btn:hover { |
| z-index: 2; | ||
| } | ||
|
|
||
| .sort-dropdown .dropdown-btn:hover { |
| border: #e9e9e9 solid 2px; | ||
| } | ||
|
|
||
| .recipe-card:hover { |
|
|
||
| <section class="random-button-container"> | ||
| <button class="random-btn"> | ||
| <span class="material-icons">shuffle</span> |
There was a problem hiding this comment.
The random button was not obvious for me. I suggest you add the text "random" for clarification and consistency as the other buttons.
… to after functions
There was a problem hiding this comment.
Wow, so nicelooking styling! I can tell you spent time on it. However, there’s a small bug appearing in mobile when opening the sorting dropdown - then we get a little side scroll. This needs to be fixed in order to be approved.
Your JavaScript looks good and I think you’ve chosen descriptive names for your functions 👍
PS. Hehe loving the empty state 😄
|
Thank you so much for the feedback! |
Recorded a little video to showcase, hope this helps! |
|
Thanks a lot! That was really helpful. I’ve implemented a fix by introducing a design-driven breakpoint at 361px, since that’s where the layout started to break. The update keeps the dropdowns and recipe cards intact without triggering horizontal scroll. It holds up visually down to 314px, which is below the standard 320px. Curious if you think it’s worth optimizing for even smaller widths too? 🙌 |
No description provided.