JS RECIPE CODE #24
JS RECIPE CODE #24
Conversation
| <button type="button" class="filter" id="usa-btn">American</button> | ||
| <button type="button" class="filter" id="asia-btn">Asian</button> | ||
| <button type="button" class="filter" id="china-btn">Chinese</button> | ||
| <button type="button" class="filter" id="vegetarian-btn">Vegetarian</button> |
There was a problem hiding this comment.
The "Vegetarian" is supposed to be included in diet and not cuisines?
| <h1>Recipe Library</h1> | ||
| <section class="filters"> | ||
| <div> | ||
| <h2>Filter cousines</h2> |
There was a problem hiding this comment.
Just commenting the typo, should be "Filter cuisines".
| </div> | ||
| <div> | ||
| <h2>Sort on by</h2> | ||
| <button class="sort" id="hightolowbtn">Cooking time</button> |
There was a problem hiding this comment.
Maybe change to "high-to-low-btn" or "highlow-btn" for better readability.
| <button type="button" class="filter" id="vegetarian-btn">Vegetarian</button> | ||
| </div> | ||
| <div> | ||
| <h2>Sort on by</h2> |
There was a problem hiding this comment.
Just simple change in typo, change "Sort on by" to "Sort by". Nothing major!
| } | ||
|
|
||
| /* Special Button Styles */ | ||
| .popular-btn { |
There was a problem hiding this comment.
You are using the class .popular-btn , but you have used an id though in your HTML file.
|
Don't forget to add a link to your deployed website as mentioned in a separate forum. |
There was a problem hiding this comment.
Great work putting this together! I would say this code is well-organized and I like the way you have structured your implemented features such as filtering, sorting, and fetched data. There are a few areas where consistency could be improved for better readability, but nothing major. I would have loved to see the final result on a website and play around a little bit. Only then do I think I would have had something else to add to this code review. Keep up the good work!
|
Can you share a link to your deployed page as well please 😇 |
|
Yes will send it on slack im a few minutes!
…On Wed, 26 Mar 2025 at 09:40, Matilda Brunemalm ***@***.***> wrote:
Can you share a link to your deployed page as well please 😇
—
Reply to this email directly, view it on GitHub
<#24 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/BKQ46H4XUWUWVCFLDW7X63D2WJKWPAVCNFSM6AAAAABZDYNEY6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONJTGYYDONZWHA>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
[image: HIPPIEKICK]*HIPPIEKICK* left a comment
(Technigo/js-project-recipe-library#24)
<#24 (comment)>
Can you share a link to your deployed page as well please 😇
—
Reply to this email directly, view it on GitHub
<#24 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/BKQ46H4XUWUWVCFLDW7X63D2WJKWPAVCNFSM6AAAAABZDYNEY6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONJTGYYDONZWHA>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
|
Please share a link to Netlify here on GitHub so that I can review your handin. |
|
Hello sorry https://fabulous-licorice-0cd5d2.netlify.app/
…On Thu, Mar 27, 2025 at 1:35 PM Matilda Brunemalm ***@***.***> wrote:
Please share a link to Netlify here on GitHub so that I can review your
handin.
—
Reply to this email directly, view it on GitHub
<#24 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/BKQ46HYGJM2RDJZKCBVQLZL2WPPBNAVCNFSM6AAAAABZDYNEY6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONJXHA4DONZWGQ>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
[image: HIPPIEKICK]*HIPPIEKICK* left a comment
(Technigo/js-project-recipe-library#24)
<#24 (comment)>
Please share a link to Netlify here on GitHub so that I can review your
handin.
—
Reply to this email directly, view it on GitHub
<#24 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/BKQ46HYGJM2RDJZKCBVQLZL2WPPBNAVCNFSM6AAAAABZDYNEY6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONJXHA4DONZWGQ>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
|
Recipe Library <https://dariusrecipe.netlify.app/>
This one
…On Wed, Mar 26, 2025 at 9:40 AM Matilda Brunemalm ***@***.***> wrote:
Can you share a link to your deployed page as well please 😇
—
Reply to this email directly, view it on GitHub
<#24 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/BKQ46H4XUWUWVCFLDW7X63D2WJKWPAVCNFSM6AAAAABZDYNEY6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONJTGYYDONZWHA>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
[image: HIPPIEKICK]*HIPPIEKICK* left a comment
(Technigo/js-project-recipe-library#24)
<#24 (comment)>
Can you share a link to your deployed page as well please 😇
—
Reply to this email directly, view it on GitHub
<#24 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/BKQ46H4XUWUWVCFLDW7X63D2WJKWPAVCNFSM6AAAAABZDYNEY6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONJTGYYDONZWHA>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
There was a problem hiding this comment.
Since you’re only fetching 4 recipes, it’s hard to try out your filters. Maybe fetch some more recipes? All your sorting options don’t work, so check that out too.
You’ve given your functions descriptive names - good! Please clean up your code however, get rid of console.logs() and be consistent in whether you use arrow functions or the function keyword. And should really all those functions run on page load?
Missing requirements:
- Users should be able to select at least one filter, and at least one sorting option
- Your page should show a useful message to the user in case the daily API quota has been reached
- The user should be able to click a button that selects a random recipe, and your page should display the selected item
- Your page should have an empty state, e.g. if there are no recipes matching the filter - show a meaningful message to the user
Do another take on this and request a re-review when you're ready. Almost there 💪
|
Ping! 🔔 |
No description provided.