Recipe library - Asako #60

Appilistus · 2025-10-10T13:30:36Z

Link to Netlify : https://js-project-recipe-library-site.netlify.app/

gabriellaberko · 2025-10-10T14:19:09Z

index.html

+                placeholder="Find a recipe or ingredient">
+            <button
+                type="button"
+                class="search-button"><span class="search-emoji">🔍</span></button>


Suggesting a new line for span and another one for the closing tag for the button here :)

gabriellaberko · 2025-10-10T14:22:40Z

index.html

+        <div id="recipe-container">
+            Loading...
+        </div>
+        <p id="no-results" style="display: none;">Oops... 😣 No recipes found</p>


style="display: none; <---- Would maybe add a class here instead, that you can style in CSS and control in JS, instead of putting some CSS inside the HTML :)

I added "display: none" in CSS instead :) And It actually needs to be id here because I want to use this message only for the search function. I have several error messages with class="no-results", and if this no-results had class, it would be shown with other error message which has the same class when something went wrong. To avoid that I use id here :)

gabriellaberko

To summarize - I am amazed, you have done a great job with this project! The code is structured, clean and easy to follow, and you have mastered all the JavaScript functionality and achieved a responsive design. From what I can see it seems to meet all the assessment criteria + stretch goals.

Again, well done! Was a pleasure to review it!

gabriellaberko · 2025-10-10T14:23:54Z

index.html

Overall great structure, super clean and readable! The naming of elements is great and self-explanatory :) Great work!

gabriellaberko · 2025-10-10T14:27:36Z

style.css

+}
+
+/* ======================================
+favorite recipes button


Love these comments for a great overview of where the styling is applied!

gabriellaberko · 2025-10-10T14:42:12Z

style.css

+favorite recipes button
+======================================= */
+
+.favorites {


A small nice-to-have is to add a similar hoving effect & active state to the favorite button, as the other buttons have! :)

Added a border and box shadow :) Thank you for the tips!

gabriellaberko · 2025-10-10T14:45:52Z

style.css

+style for the buttons
+======================================= */
+
+.button-container {


I would consider to add a gap property to the button-container to have some more spacing between the buttons - but probably in a media query. The buttons look great, but look a little bit squeezed on a wider screen (more specifically wider than 1000px) :)

I didn't notice that and now I added a gap :) Thank you! It looks better this way!

gabriellaberko · 2025-10-10T14:47:31Z

style.css

+    margin: 20px 0;
+}
+
+.view-recipe-button {


Love the idea of having a button that links out to the full recipe!

gabriellaberko · 2025-10-10T15:05:25Z

script.js

+// save favorite recipes in localStorage
+let favorites = JSON.parse(localStorage.getItem("favorites")) || [];
+
+const attachLikeEvents =() => {


Great work with the favorite functionality! And the comments makes it really easy to follow. Impressed that you got it to work well with the local storage for it as well! The only comment I have here, is that it would be nice to keep the active state of the hearts when you click to see your favorite recipes. It is a little hard to see if you remove them from there, even though the functionality is there (to add and remove) :) Besides that small thing, it works great! Well done!

You are right, it would look better in your way! Thank you for trying and checking all functions:) I would definitely try that if I had more time:D

I was thinking exactly this. The UX of that favorites view confused me a bit since the red color didnt follow to this view.

gabriellaberko · 2025-10-10T15:07:06Z

script.js

+    if (favorites.length > 0) {
+        displayRecipes(favorites);
+    } else {
+        container.innerHTML = `<p class="no-results"> No favorite recipes yet ❤️</p>`;


Great idea to have a specific message here, instead of the default error message of no recipes matching the filter!

gabriellaberko · 2025-10-10T15:14:40Z

script.js

+//===============================
+
+// change the color of the button when clicked
+randomBtn.addEventListener("click", () => {


Would be nice to try to remove the active state from the random button when you select something else (another filter button etc.). And also for it to stay active when you press it several times. Now it seems to toggle between active/inactive state even if you keep randomizing more recipes with the button, and it also stays active when you choose another filter option :)

Thank you for checking this! I didn't notice it by myself.

gabriellaberko · 2025-10-10T15:15:47Z

script.js

+    let matchFound = false;
+
+    searchTargets.forEach((target) => {
+        const text = target.textContent.toLowerCase();


Search function works great! Love that you are able to search in the whole text content!

gabriellaberko · 2025-10-10T15:19:26Z

script.js

Really great work with the JavaScript! You seem to have mastered it already. Very clean, readable and structured like everything else!

I have a few comments below, regarding the active state of the random button and the like buttons - but the actual functionality of all the sorting and filtering (including the favorites) works great regardless!

Appilistus · 2025-10-11T15:51:37Z

Thank you so much for your positive and constructive feedback!:D

JennieDalgren

Great job with this project! Not only have you nailed all the requirements and several stretch goals, your code is very well structured and easy to follow.

I've added a few comments, mainly some small tips on how you can refactor your css a bit. And You got useful tips from your peer reviewer too.

Keep up the great work! 🚀

JennieDalgren · 2025-10-26T21:29:12Z

style.css

+    background-color: #ccffe2;
+    color: #0018a4;
+    font-size: 18px;
+    border: none;


To avoid the "jumping" of the buttons when you hover, since you add a border of 2px on hover, you could change border: none; here to instead say border: 2px solid transparent; that way it has an invisible border all the time, but you don't have the jumping when a button is hovered. This goes for both wort and filter btns ofc.

JennieDalgren · 2025-10-26T21:30:53Z

style.css

+.random-btn {
+    text-align: center;
+    background-color: beige;
+    color: #0018a4;
+    font-size: 18px;
+    border: none;
+    width: auto;
+    height: 40px;
+    border-radius: 50px;
+    padding: 8px 16px;
+    margin: 5px;
+    cursor: pointer;


it looks like the different buttons share most ofd the styling. You could have a general button class that takes care of the base styling and then just style the random-btn, sort-btn etc with the styles that is unique that that specific button. To avoid repeating yourself. (Keep it DRY)

JennieDalgren · 2025-10-26T21:34:09Z

script.js

+// save favorite recipes in localStorage
+let favorites = JSON.parse(localStorage.getItem("favorites")) || [];
+
+const attachLikeEvents =() => {


I was thinking exactly this. The UX of that favorites view confused me a bit since the red color didnt follow to this view.

JennieDalgren · 2025-10-26T21:34:41Z

script.js

+        // check if the recipe is already in favorites
+        if (favorites.some(fav => String(fav.id) === recipeId)) {
+            // remove recipe if it is already liked
+            favorites = favorites.filter(fav => String(fav.id) !== recipeId);
+            button.classList.remove("liked");
+        } else {
+            // otherwise add recipe to my favorites
+            favorites.push(recipe);
+            button.classList.add("liked");
+        }


JennieDalgren · 2025-10-26T21:36:33Z

script.js

+    } else {
+        container.innerHTML = `<p class="no-results">No recipes found 🥲 Check your API key or quota.</p>`;
+    }


JennieDalgren · 2025-10-26T21:37:24Z

script.js

+descBtn.addEventListener("click", () => {
+    currentSort = "desc";
+    applyKitchenFilters();
+});
+
+ascBtn.addEventListener("click", () => {
+    currentSort = "asc";
+    applyKitchenFilters();
+})


Super! Great that you are storing the current sort like that. That males it persist even when you change the cuisine filter.

Asako Kanno added 20 commits September 23, 2025 20:23

first push

369dbcd

add text in placeholder

260a92b

add JS

bf89ff1

fix filter/sort buttons

da424cb

add filter function

d1fb109

add sort function

ee3a2c0

fix filter/sort functions

d510860

add search form

2109833

add like button

436840a

add search function

848a6d0

add API

b54b8f4

add backup recipes

dc5ac83

add like function

2f46629

fix bug

43d5cec

fix search function

0087c9a

fix search function

d1d11c7

add README

55e46a6

change api to complexSearch

0a96a17

fix bug

0da1123

add link to README

dd4332b

gabriellaberko reviewed Oct 10, 2025

View reviewed changes

Asako Kanno added 2 commits October 11, 2025 17:51

fix bug

1574775

fix bug

2da5e35

JennieDalgren approved these changes Oct 26, 2025

View reviewed changes

JennieDalgren self-assigned this Oct 26, 2025

Recipe library - Asako #60

Are you sure you want to change the base?

Recipe library - Asako #60

Uh oh!

Conversation

Appilistus commented Oct 10, 2025

Uh oh!

gabriellaberko Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gabriellaberko left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Appilistus commented Oct 11, 2025

Uh oh!

JennieDalgren left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

gabriellaberko Oct 10, 2025 •

edited

Loading