Jonny Hicks - Recipe Library Project #25
Conversation
… using IF/ else .
… downs and filter is still not working
… on mobile and desktop but mobile styling is missing.
… sort button neeed to apply to Json
… only have cusines
…plex search to API to haddling missing cusine title
…splayed when not results are found with seach bar
There was a problem hiding this comment.
Hej Jonny! Nice work on this project, I can see you've put alot of time and effort into it.
Ok so before digging into the code, I started just trying out the site both on desktop and on my phone and here are some comments just from the user experience part of it:
-
All filters works perfect! I like that its so many choices.
-
The ”I dont know” text on the button could be better described so the user knows exactly whats gonna happen when they do click the button. (Maybe add a description text above or change button text to ”Get random recipe”?)
-
The ’No recipe found’ message pops up when searching for example Swedish - nice!
-
Error message alert when API requests runs out works great too!
-
When choosing a cuisine (eg Creole) and then sort (eg Sort by cooking time) all recipes appear again instead of sorting specific the Creole types.
On mobile:
-
The search bar and random button doesnt work when I write an input/click the button!
-
On the dropdown menu "Filter" maybe add some more padding around each filter name so it’s easier for the user to click. I struggled a little clicking the correct one on my phone cause they are all very close together!
Below you can find comments on some specific code, for example ideas how to optimize the code and so on. Only suggestions!
Thanks for letting me review your code, well done again 💯
| id="filterSort"> | ||
| <div class="flex filter"> | ||
| <h4>Filter by Cuisine</h4> | ||
| <form class="selectors green" |
There was a problem hiding this comment.
I like how you used these classes to style the buttons!
Index.html
Outdated
| </div> | ||
| <div class="right-side"> | ||
| <div class="search-container"> | ||
| ` |
Index.html
Outdated
| class="selectors pink" | ||
| aria-label="Sort by options"></form> | ||
| </div> | ||
| <div class="right-side"> |
There was a problem hiding this comment.
is there a better name than "right-side" for this class maybe? What if you wanna change the alignment of the content in the future, and then you also have to change the class name.
| <input type="text" | ||
| class="search-input" | ||
| id="search" | ||
| placeholder=" ⌕ What sounds good?" |
There was a problem hiding this comment.
I like the little search icon! Cute!
| </div> | ||
| <button id="randomRecipeButton" | ||
| class="random-lrg" | ||
| aria-label="Get a random recipe"> I don't Know! </button> |
There was a problem hiding this comment.
As already mentioned in my main comment, consider a more descriptive button text so the user knows what to expect on click!
script.js
Outdated
| "Middle Eastern", "Nordic", "Southern", "Spanish", "Thai", "Vietnamese" | ||
| ]; | ||
|
|
||
| const URL = `https://api.spoonacular.com/recipes/complexSearch?apiKey=${API_KEY}&number=50&cuisine=${fixedCuisines.join(',')}&fillIngredients=true&addRecipeInformation=true&sort=random`; |
There was a problem hiding this comment.
The requirement says:
• Your page should fetch real recipe data from Spoonacular's recipes/random endpoint
So just make sure the recipes/complexSearch is ok too for this assignment!!
There was a problem hiding this comment.
Jennie approved this in the class channel, and it is still random. The search only includes supported cuisines, and I am only fetching it once, not multiple times.
script.js
Outdated
| initializePage(recipes); | ||
| }) | ||
| .catch(error => { | ||
| alert("OH NO! There is an issue with retrieving new recipes,\nplease try again tomorrow or continue with previous retrieved recipes.\n\n " + error); |
There was a problem hiding this comment.
I like the use of alert, I didnt think about that as an option in my project!
|
Also!! make sure you use h1, h2, h3, h4 etc in correct order. I couldnt locate a h2 or h3 in your code, only h4 and h5. |
There was a problem hiding this comment.
Good job with this project Jonny! I think the result looks super and the code as well (mostly).
One of the requirements for this project is “Your code should be split up into different functions that are named after what they do”. I’d like to ask you to put your fetching in a function, as well as being consistent with whether you use arrow functions or declare functions with the function keyword. Most of your functions have descriptive names, but the one called “recipeCards”, maybe it could be called “createRecipeCards” or something to really make it clear that it’s a function and not an array if that makes sense. And searchFunction could maybe be called searchRecipes (we usually don’t name our functions function 😇). Work on this to be approved please.
The button called “Sort by” - what should it do? I think you can remove it since it appears a bit buggy that nothing happens when clicking it.
LOVE what you did with the filters, making your site more dynamic ⭐ Maybe add some more padding in your buttons?
The Recipe Library is a web application that helps users find and explore many recipes from different cuisines using the Spoonacular API. Users can filter recipes by cuisine and sort them by servings, popularity, or cooking time. They can also search for specific recipes by title, cuisine, or diet. The application includes a random recipe generator for users who want inspiration. It is built with HTML, CSS, and JavaScript.
https://keepcooking.netlify.app/