JS-Recipe-Library-Project #33
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Recipe Library</title> | ||
| <link rel="stylesheet" href="/style.css"> | ||
| </head> | ||
| <body> | ||
| <h1>Recipe Library</h1> | ||
|
|
||
| <div class="filter-container"> | ||
| <div class="filter-group"> | ||
| <div class="filter-title">Filter options</div> | ||
| <div class="filter-options"> | ||
| <label class="filter-label"> | ||
| <input type="radio" name="cuisine" value="all" checked class="filter-input"> | ||
| <span class="filter-button" data-type="">All</span> | ||
| </label> | ||
| <label class="filter-label"> | ||
| <input type="radio" name="cuisine" value="Italian" class="filter-input"> | ||
| <span class="filter-button">Italy</span> | ||
| </label> | ||
| <label class="filter-label"> | ||
| <input type="radio" name="cuisine" value="Asian" class="filter-input"> | ||
| <span class="filter-button">Asian</span> | ||
| </label> | ||
| <label class="filter-label"> | ||
| <input type="radio" name="cuisine" value="Mexican" class="filter-input"> | ||
| <span class="filter-button">Mexican</span> | ||
| </label> | ||
| <label class="filter-label"> | ||
| <input type="radio" name="cuisine" value="Middle Eastern" class="filter-input"> | ||
| <span class="filter-button">Middle Eastern</span> | ||
| </label> | ||
| <label class="filter-label"> | ||
| <input type="radio" name="cuisine" value="European" class="filter-input"> | ||
| <span class="filter-button">European</span> | ||
| </label> | ||
| <label class="filter-label"> | ||
| <input type="radio" name="cuisine" value="Mediterranean" class="filter-input"> | ||
| <span class="filter-button">Mediterranean</span> | ||
| </label> | ||
| <label class="filter-label"> | ||
| <input type="radio" name="cuisine" value="American" class="filter-input"> | ||
| <span class="filter-button">American</span> | ||
| </label> | ||
|
|
||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <div class="filter-group"> | ||
| <div class="filter-title">Sorting options</div> | ||
|
There was a problem hiding this comment. maybe put all text in a p-tag or an h-tag? You can still use the div as well though if you need to position them in a certain way. |
||
| <div class="filter-options"> | ||
| <label class="sort-label"> | ||
| <input type="radio" name="sort" value="time" checked class="sort-input"> | ||
| <span class="sort-button">Cooking time</span> | ||
| </label> | ||
| <label class="sort-label"> | ||
| <input type="radio" name="sort" value="popularity" class="sort-input"> | ||
| <span class="sort-button">Popularity</span> | ||
| </label> | ||
| <label class="sort-label"> | ||
| <input type="radio" name="sort" value="price" class="sort-input"> | ||
| <span class="sort-button">Price</span> | ||
| </label> | ||
| <button id="random">Random Recipe</button> | ||
| </div> | ||
| </div> | ||
|
Comment on lines
+53
to
+70
There was a problem hiding this comment. you have chosen really good class names that makes sense! well done |
||
| </div> | ||
|
|
||
| <br> | ||
| <br> | ||
|
|
||
| <main> | ||
|
|
||
| <div class="card" data-type="italian"> | ||
| <img src="images/avocado.jpg" alt="Food Image"> | ||
| <div class="card-title">Cheat's cheesy Focaccia</div> | ||
| <div class="divider"></div> | ||
| <div class="details"> | ||
| <div class="detail-item"> | ||
| <div class="detail-label">Cuisine:</div> | ||
| <div class="detail-value">Italian</div> | ||
| </div> | ||
| <div class="detail-item"> | ||
| <div class="detail-label">Time:</div> | ||
| <div class="detail-value">40 minutes</div> | ||
| </div> | ||
| </div> | ||
| <div class="divider"></div> | ||
| <div class="ingredients-title">Ingredients</div> | ||
| <div class="ingredients-list"> | ||
| 500 pack bread mix<br> | ||
| 2 tbsp. olive oil, plus a little extra for drizzling<br> | ||
| 25g parmesan (or vegetarian alternative), grated<br> | ||
| 75g dolcelatte cheese (or vegetarian alternative) | ||
| </div> | ||
| </div> | ||
|
Comment on lines
+78
to
+100
There was a problem hiding this comment. this part is not ncessary any more, but you probably know that already ;) |
||
|
|
||
| </main> | ||
|
|
||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| const recipesContainer = document.querySelector("main"); | ||
| const filterInputs = document.querySelectorAll(".filter-input"); | ||
| const sortInputs = document.querySelectorAll(".sort-input"); | ||
| const random = document.getElementById("random"); | ||
|
|
||
| let recipes = []; // global array to store recipes | ||
|
|
||
| // Fetch recipes from Spoonacular API | ||
| const fetchRecipes = async () => { | ||
| const apiKey = "40e9f9393aec4ad99ce5388eacd63c94"; | ||
| const apiURL = `https://api.spoonacular.com/recipes/random?number=10&apiKey=${apiKey}`; | ||
|
|
||
| try { | ||
| const response = await fetch(apiURL,); | ||
|
|
||
| if (!response.ok) { | ||
| throw new Error("Failed to fetch recipes. "); | ||
| } | ||
|
|
||
| const data = await response.json(); | ||
|
|
||
| if (!data.recipes) { | ||
| recipesContainer.innerHTML = "<p>Daily API limit reached. Try again later.</p>"; | ||
| return; | ||
| } | ||
|
|
||
| recipes = data.recipes; // Store fetched recipes globally | ||
| renderRecipes(recipes); | ||
| } catch (error) { | ||
| console.error("Error fetching recipes:", error); | ||
| recipesContainer.innerHTML = "<p>Failed to load recipes. Try again later.</p>"; | ||
|
Comment on lines
+15
to
+32
There was a problem hiding this comment. nice error-handeling in this one! Maybe add some more in case a recipie doesn't have a value somewhere. There was for example one recipie where the picture didnt show. |
||
| } | ||
| }; | ||
|
|
||
| // Render recipes | ||
| const renderRecipes = (recipes) => { | ||
| recipesContainer.innerHTML = ""; | ||
|
|
||
| if (recipes.length === 0) { | ||
| recipesContainer.innerHTML = "<p>No recipes found.</p>"; | ||
| return; | ||
| } | ||
|
|
||
| recipes.forEach((recipe) => { | ||
| const recipeCard = document.createElement("div"); | ||
| recipeCard.classList.add("recipe-card"); | ||
|
|
||
| recipeCard.innerHTML = ` | ||
| <img src="${recipe.image}" alt="${recipe.title}"> | ||
| <h2>${recipe.title}</h2> | ||
| <p>Ready in ${recipe.readyInMinutes} minutes</p> | ||
| <p>Servings: ${recipe.servings}</p> | ||
| <a href="${recipe.sourceUrl}" target="_blank">View Recipe</a> | ||
|
There was a problem hiding this comment. I really like that the recipe opens up in a new tab! Its a nice touch and something me as a user would appreciate |
||
| `; | ||
|
|
||
| recipesContainer.appendChild(recipeCard); | ||
| }); | ||
| }; | ||
|
|
||
| // Filter and sort recipes | ||
| const filterAndSortRecipes = () => { | ||
| let filteredRecipes = [...recipes]; | ||
|
|
||
| // Get selected cuisine | ||
| const selectedCuisineInput = document.querySelector("input[name=cuisine]:checked"); | ||
| const selectedCuisine = selectedCuisineInput ? selectedCuisineInput.value.toLowerCase() : "all"; | ||
|
|
||
| if (selectedCuisine !== "all") { | ||
| filteredRecipes = filteredRecipes.filter((recipe) => | ||
| recipe.cuisines.some(cuisine => cuisine.toLowerCase() === selectedCuisine) | ||
| ); | ||
| } | ||
|
|
||
| // Get selected sort option | ||
| const selectedSortInput = document.querySelector("input[name=sort]:checked"); | ||
| const selectedSort = selectedSortInput ? selectedSortInput.value : "none"; | ||
|
|
||
| if (selectedSort === "popularity") { | ||
| filteredRecipes.sort((a, b) => (b.healthScore || 0) - (a.healthScore || 0)); | ||
| } else if (selectedSort === "price") { | ||
| filteredRecipes.sort((a, b) => (a.pricePerServing || 0) - (b.pricePerServing || 0)); | ||
| } else if (selectedSort === "time") { | ||
| filteredRecipes.sort((a, b) => a.readyInMinutes - b.readyInMinutes); | ||
|
Comment on lines
+79
to
+84
There was a problem hiding this comment. I believe this works, but I have no way of checking since the only one that is written in the recipe-card is time. I'm excited to see if it works as planned when I see more text :) |
||
| } | ||
|
|
||
| renderRecipes(filteredRecipes); | ||
| }; | ||
|
|
||
| // Show a random recipe | ||
| const showRandomRecipe = () => { | ||
| if (recipes.length === 0) { | ||
| recipesContainer.innerHTML = "<p>No recipes available.</p>"; | ||
| return; | ||
| } | ||
| const randomIndex = Math.floor(Math.random() * recipes.length); | ||
| renderRecipes([recipes[randomIndex]]); | ||
| }; | ||
|
|
||
| // Attach event listeners | ||
| filterInputs.forEach(input => input.addEventListener("change", filterAndSortRecipes)); | ||
| sortInputs.forEach(input => input.addEventListener("change", filterAndSortRecipes)); | ||
| random.addEventListener("click", showRandomRecipe); | ||
|
|
||
| // Fetch and display recipes on load | ||
| fetchRecipes(); | ||
| }); | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All of the html needs a bit of cleanup. Looks like some of the indentations are 2 spaces and some are 4 spaces. It would be good to stick with 2. The element that have several attributes should have the attributes on different lines. Eg.
… and so on.