PR Recipe Library #48

irisdgz · 2025-10-09T12:15:12Z

No description provided.

irisdgz · 2025-10-09T13:01:13Z

Netlify: https://mysecondprojectlibrary.netlify.app/

carro-barro

Här kommer en översiktlig feedback:

Bra responsivitet ser bra utan på både stora och små skärmar.
Tycker du har lyckats styla den som figma designen jättebra, vilket jag tror är en bra egenskap att ha när man kommer in i arbetslivet, så bra jobbat!
Tyvärr verkar det som att Kitchen & diets filter inte "funkar" helt. Tror det beror på att det inte finns rätt data, för själva funktionen finns. Men för några som exempelvis cuisine och ingrediens finns inte rätt data, cuisine är ”unknown” på dem flesta och ingredients är 0. Man kanske kan försöka ändra endpoints i APIn för att få rätt information och därefter utforma vilka typer av cuisines som ska finnas. Jag använde i slutet random recipes api men när jag i början använde complex search behövde jag själv lägga på en del endpoints för att få den data jag ville åt. sen skulle man kunna lägga till ett "no recipes found" meddelande även för kitchen och diets, som du har på dem andra filtrena.
Bra struktur i html filen, med kommentarer och mellanrum mellan olika delar, gör det enkelt att läsa och förstå
Snyggt med strukturen i js också, bra med kommentarer och variable namn

Bra jobbat med projektet!

carro-barro · 2025-10-15T12:13:18Z

README.md

+Basic structure HTML, Style in CSS, Add functionalities in js.
+
+ https://mysecondprojectlibrary.netlify.app/
+
+ Week 1
+ Start to build a Recipe Library
+ HTML structure:
+ Input fields for filters and sorting options
+ A placeholder recipe card
+ Writing JavaScript functions to handle user selections
+ Sorting options 
+
+ Week 2
+ Arrays, object and loops to show recipes 
+ using selections, be able to display all of the recioes, feature a button that selects a random recipe, hav an empty state, responsive from 32npx to 1600px
+
+Week 3
+ Fetch real recipe data from Spoonacular's API
+ Display dynamic recipe cards based on the API data
+ Adapt filtering & sorting to match the API response format
+ Show a useful message to the user in case the daily quota has been reached
+
+ The goal was to practice working with arrays, objects, and functions in JavaScript and to fetch and display real data from an external API
+ Styled by using CSS variables for what I call Technigo colors (blue, pink, and aqua) to make it look as much as the Figma demo. 


gillar din planering, har inte använt readme filen så mycket, ska nog börja göra det. för denna planering gör det väldigt tydligt!

carro-barro · 2025-10-15T12:13:21Z

index.html

+          <button class="pill active" data-kitchen="all">All</button>
+          <button class="pill" data-kitchen="italy">Italy</button>
+          <button class="pill" data-kitchen="asian">Asian</button>
+          <button class="pill" data-kitchen="middle eastern">Middle Eastern</button>
+          <button class="pill" data-kitchen="American">American</button>


visste inte vad "pill" var, så jag googlade, coolt visste inte att det fanns ett namn för en sån typ av knapp

carro-barro · 2025-10-15T12:15:09Z

index.html

+      <div class="control-group sorting-row">
+        <h2 class="control-title">Sorting options</h2>
+
+      <div class="pill-group sort-row">


undrar över att det finns två classes, finns det en anledning till det?

carro-barro · 2025-10-15T12:17:39Z

index.html

+<!-- Asending and Desending 
+ 
+Delete them in HTML
+
+Remove order from filters in JS
+
+Simplify your sortRecipes() function
+
+No CSS changes needed -->


är dem här kommentarerna relevanta nu när projektet är klart?

carro-barro · 2025-10-15T12:19:28Z

styles.css

+/* this applies to the whole website, like a color parent*/
+:root {
+  --blue: #0018A4; /* Technigo blue */
+  --pink: #FF6589; /* Technigo pink */
+  --aqua: #CCFFE2; /* Technigo light aqua */
+  --gray-dark: #333;
+  --gray-light: #E5E7EB;
+  --bg: #f9fafc;
+}


coolt, har själv inte använt mig av detta. Smart och najs att du la till kommentarer till den för att göra det tydligare

carro-barro · 2025-10-15T12:35:13Z

script.js

+  // Build dynamic query string based on selected filters
+  let url = `${BASE_URL}?number=10&addRecipeInformation=true&apiKey=${API_KEY}`;


coolt sätt att addera med info i url:en. roligt att se olika sätt att göra det på. visste inte att man kunde göra det "efter" den vanliga url:en

carro-barro · 2025-10-15T12:37:02Z

script.js

+  // Here I am using the fetch function to make a request to the API endpoint.
+  // This is where calls the API and waits for a response. If the status is 402, spoonacular is 
+  // showing that the daily quota is all used.
+  // Otherwise, it converts the response to JSON so you can use the data.
+   fetch(url)
+    .then(res => {
+      if (res.status === 402) {
+        recipesEl.innerHTML = `<p>Daily API quota exceeded. Please try again tomorrow.</p>`;
+        msgEl.textContent = "API limit reached"; 
+        throw new Error("Quota reached");
+      }
+      return res.json();
+    })
+
+    // If the fetch is successful, it processes the data.
+    // It normalizes the data to a consistent format and stores it in the DATA array.
+    // Finally, it calls showRecipes to display the recipes on the page.


bra förklarat här!

carro-barro · 2025-10-15T12:40:24Z

script.js

+    // Filter function  (time + ingredients) (locally), Filters the list by the user’s selected time and ingredient count.
+    // Returns only recipes that match.
+    const filterRecipes = list =>  // Function 2
+    list.filter(r => {
+    // Cooking time
+      if (filters.time === "under15" && !(r.time < 15)) return false;
+      if (filters.time === "15to30" && !(r.time >= 15 && r.time <= 30)) return false;
+      if (filters.time === "30to60" && !(r.time >= 30 && r.time <= 60)) return false;
+      if (filters.time === "over60" && !(r.time > 60)) return false;
+
+    // Ingredient amount
+      if (filters.ingredients === "under5" && !(r.ingredients < 5)) return false;
+      if (filters.ingredients === "6to10" && !(r.ingredients >= 6 && r.ingredients <= 10)) return false;
+      if (filters.ingredients === "11to15" && !(r.ingredients >= 11 && r.ingredients <= 15)) return false;
+      if (filters.ingredients === "over16" && !(r.ingredients > 16)) return false;
+
+    return true;
+  });


gillar ditt upplägg, ser väldigt cleant ut och lätt att läsa och förstå

carro-barro · 2025-10-15T12:42:01Z

script.js

+  msgEl.textContent = `Results: ${sorted.length} | Kitchen: ${filters.kitchen} | Diet: ${filters.diet} | Sort: ${filters.sort} (${filters.order})`;
+};


gillar att du lagt till det här meddelandet och att man får info om ens sök/filter resultat

carro-barro · 2025-10-15T12:43:58Z

script.js

+pills.forEach(btn => {
+  btn.addEventListener("click", () => {
+    const group = btn.parentElement.querySelectorAll(".pill");
+    group.forEach(b => b.classList.remove("active"));
+    btn.classList.add("active");
+
+    if (btn.dataset.kitchen) filters.kitchen = btn.dataset.kitchen;
+    if (btn.dataset.diet) filters.diet = btn.dataset.diet;
+    if (btn.dataset.time) filters.time = btn.dataset.time;
+    if (btn.dataset.ingredients) filters.ingredients = btn.dataset.ingredients;
+    if (btn.dataset.sort) filters.sort = btn.dataset.sort;
+
+
+    // If user changes kitchen or diet → refetch from API
+    if (btn.dataset.kitchen || btn.dataset.diet) {
+      fetchData();
+    } else {
+      // Other filters (time, ingredients, sorting) work locally
+      showRecipes(recipes);
+    }
+  });
+});
+randomBtn.addEventListener("click", () => {
+  const random = recipes[Math.floor(Math.random() * recipes.length)];
+  showRecipes([random]);
+});


har inte sett detta sett att gör eventlisteners på, spännande att se nya sätt att göra det på

JennieDalgren

Great job all in all.
I like that you have added some visual information about the sorting and filtering options.

However, it seems like the API doesnt really give you the data you need to get the filtering going?
I can't sort on any of the kitchens and the diets just shows gluten free on all recipes.
Please take a look. You don't need to have recipes on all of the kitchens avaialbe but some more info on the recipes is needed insted of showing unknown or 0. And the filtering needs to work.

Fix this before being approved.

… and called.

JennieDalgren

✅

irisdgz added 6 commits October 9, 2025 13:08

Updated html, css and js

9fdf58c

Updated HTML

9d7bbb5

Updated js

4c77e8e

Added some comments in the js

489c7e9

Updated README

66a746c

updated spoonacular key

7b88b62

irisdgz added 8 commits October 10, 2025 09:29

Added Netlify link

52ad978

Added the random button and updated css and js

506a726

Minder changes in the CSS page title

0fbc4aa

Minor changes in js

1303b8d

Minor changes in js

d52e6b3

make changes in the sorting options, js, html and css.

8e22b9b

Removed built in tool. manual url builder instead

6b70ad6

last changes in the css

b47e267

carro-barro reviewed Oct 15, 2025

View reviewed changes

JennieDalgren self-assigned this Oct 20, 2025

JennieDalgren requested changes Oct 23, 2025

View reviewed changes

irisdgz closed this Oct 24, 2025

irisdgz reopened this Oct 24, 2025

fixed HTML mathcing issues, fixed fetchData so its correctly declared…

bb5b942

… and called.

JennieDalgren approved these changes Oct 27, 2025

View reviewed changes

		// Build dynamic query string based on selected filters
		let url = `${BASE_URL}?number=10&addRecipeInformation=true&apiKey=${API_KEY}`;

		msgEl.textContent = `Results: ${sorted.length} \| Kitchen: ${filters.kitchen} \| Diet: ${filters.diet} \| Sort: ${filters.sort} (${filters.order})`;
		};

PR Recipe Library #48

Are you sure you want to change the base?

PR Recipe Library #48

Uh oh!

Conversation

irisdgz commented Oct 9, 2025

Uh oh!

irisdgz commented Oct 9, 2025

Uh oh!

carro-barro 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!

JennieDalgren left a comment

Choose a reason for hiding this comment

Uh oh!

JennieDalgren left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants