created a website with recipes, cards, filters, sorts. added css and js. #43
Conversation
|
Added random recipe button and tidied code |
… shows all recipes after clicking the random button, fixed the CSS styling, added a search function and implemented localStorage
|
Changed the buttons to dropdown menus, added an API, added a button that shows all recipes after clicking the random button, fixed the CSS styling, added a search function, and implemented localStorage. |
LeonEkelund
left a comment
LeonEkelund
left a comment
There was a problem hiding this comment.
Great job, I just found a few things :)
| body { | ||
| font-family: "Montserrat", Arial, sans-serif; | ||
| margin: 0; | ||
| padding-bottom: 30px; | ||
| padding-top: 240px; | ||
| } |
There was a problem hiding this comment.
Maybe it would be good to add a overflow x hidden here so that you cant scroll horizontally
| </head> | ||
| <body> | ||
| <header class="top-nav"> | ||
| <img src="images/aprikos.jpg" alt="aprikos" class="food" /> |
There was a problem hiding this comment.
You can see half of this image (and a bit of the searchbar) at the top when scrolling on iphone 5
JennieDalgren
left a comment
JennieDalgren
left a comment
There was a problem hiding this comment.
Great job with this project!
You have implemented the requirements and almost enough of the stretch goals to recieve a VG.
If you aim for that, implement a loading state when you fetch the data.
Let me know if you will add that, for now I will give you Approved with G
| const mapApiRecipe = (r) => ({ | ||
| // Title with fallback | ||
| title: r.title || "Untitled", | ||
| cuisine: (r.cuisines?.[0] || "unknown").toLowerCase(), | ||
| diet: (r.diets?.[0] || "none").toLowerCase(), | ||
| popularity: Math.max( | ||
| 1, | ||
| Math.min(5, Math.round((r.aggregateLikes || 0) / 100)) | ||
| ), | ||
| time: r.readyInMinutes || 0, | ||
| img: r.image || "https://via.placeholder.com/600x400?text=No+image", | ||
| ingredients: (r.extendedIngredients || []).map( | ||
| (i) => i.original || i.name || "" | ||
| ), | ||
| }); |
| const fetchRecipes = async () => { | ||
| cardsEl.innerHTML = "<p>Fetching recipes…</p>"; | ||
|
|
||
| // 1) Try cache first | ||
| const cached = localStorage.getItem(CACHE_KEY); | ||
| if (cached) { | ||
| const saved = JSON.parse(cached); | ||
| const tooOld = Date.now() - saved.timestamp > CACHE_TIME; | ||
|
|
||
| // Use cached recipes and render immediately | ||
| if (!tooOld) { | ||
| cardsEl.innerHTML = "<p>Showing recipes from cache</p>"; | ||
| recipes.length = 0; | ||
| recipes.push(...saved.items); | ||
| renderResult(); | ||
| return; // stop here if cache is fresh | ||
| } | ||
| } |
There was a problem hiding this comment.
great structure, comments and implementation of function
Hi Jennie! Thanks for the feedback! I decided to go for it and implement a loading state. :) |
|
Hi Jennie! Thanks for the feedback! I decided to go for it and implement a loading state. 🙂
King regards
Agnes Sjösten
________________________________
Från: Jennie Dalgren ***@***.***>
Skickat: den 20 oktober 2025 16:12
Till: Technigo/js-project-recipe-library ***@***.***>
Kopia: AgnesSj01 ***@***.***>; Author ***@***.***>
Ämne: Re: [Technigo/js-project-recipe-library] created a website with recipes, cards, filters, sorts. added css and js. (PR #43)
@JennieDalgren approved this pull request.
Great job with this project!
You have implemented the requirements and almost enough of the stretch goals to recieve a VG.
If you aim for that, implement a loading state when you fetch the data.
Let me know if you will add that, for now I will give you Approved with G
________________________________
In script.js<#43 (comment)>:
+const mapApiRecipe = (r) => ({
+ // Title with fallback
+ title: r.title || "Untitled",
+ cuisine: (r.cuisines?.[0] || "unknown").toLowerCase(),
+ diet: (r.diets?.[0] || "none").toLowerCase(),
+ popularity: Math.max(
+ 1,
+ Math.min(5, Math.round((r.aggregateLikes || 0) / 100))
+ ),
+ time: r.readyInMinutes || 0,
+ img: r.image || "https://via.placeholder.com/600x400?text=No+image",
+ ingredients: (r.extendedIngredients || []).map(
+ (i) => i.original || i.name || ""
+ ),
+});
nice function!
________________________________
In script.js<#43 (comment)>:
+const fetchRecipes = async () => {
+ cardsEl.innerHTML = "<p>Fetching recipes…</p>";
+
+ // 1) Try cache first
+ const cached = localStorage.getItem(CACHE_KEY);
+ if (cached) {
+ const saved = JSON.parse(cached);
+ const tooOld = Date.now() - saved.timestamp > CACHE_TIME;
+
+ // Use cached recipes and render immediately
+ if (!tooOld) {
+ cardsEl.innerHTML = "<p>Showing recipes from cache</p>";
+ recipes.length = 0;
+ recipes.push(...saved.items);
+ renderResult();
+ return; // stop here if cache is fresh
+ }
+ }
great structure, comments and implementation of function
—
Reply to this email directly, view it on GitHub<#43 (review)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BMAXIAQS4P4VS7Y5QDOKA4L3YTUTLAVCNFSM6AAAAACHSMTJA6VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZTGNJWGQYDKNBUGI>.
You are receiving this because you authored the thread.Message ID: ***@***.***>
|
Added a brief description of the recipe library app.
Updated the README to provide a detailed project overview, objectives, features, and technologies used.
3 participants
No description provided.