From 5debab0e92b8ea11f36fa1a39b4b6e472d73dada Mon Sep 17 00:00:00 2001 From: Soheib Date: Mon, 6 Jan 2025 14:48:36 +0100 Subject: [PATCH 1/3] link css and asset folder and prepare for next phase --- index.html | 3 +- styles.css | 88 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 90 insertions(+), 1 deletion(-) create mode 100644 styles.css diff --git a/index.html b/index.html index 1b30407..70d9bc5 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,9 @@ + Tweat - +
diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..a0cdbb9 --- /dev/null +++ b/styles.css @@ -0,0 +1,88 @@ +/*The big reset*/ +*, +*::before, +*::after { + box-sizing: border-box; +} + + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font: inherit; + vertical-align: baseline; +} + + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + + +body { + line-height: 1; + font-family: sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: #000; + background-color: #fff; +} + + +ol, ul { + list-style: none; +} + + +blockquote, q { + quotes: none; +} +blockquote::before, blockquote::after, +q::before, q::after { + content: ''; + content: none; +} + + +table { + border-collapse: collapse; + border-spacing: 0; +} + + +img { + max-width: 100%; + height: auto; + display: block; +} + + +button { + background: none; + border: none; + padding: 0; + cursor: pointer; +} + + +button, input, select, textarea { + font-family: inherit; + font-size: inherit; + color: inherit; +} + +/*App style*/ \ No newline at end of file From 12ea20a3220a64e1a31f12462d13b003d0b850fa Mon Sep 17 00:00:00 2001 From: Soheib Date: Mon, 6 Jan 2025 14:51:32 +0100 Subject: [PATCH 2/3] adjust project description --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 93bb712..4873e72 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,6 @@ Tweat 🍴✨ Tweat is a modern recipe web app designed to make your cooking experience delightful and personal. Explore a collection of built-in recipes for inspiration, and easily add your own creations to build a customized recipe book. Whether you're a home chef or a foodie, Tweat helps you organize, discover, and share your culinary ideas with ease. - Tweat, is not an homonym of the old "tweet", but is a fast way to say "To Eat!" + Tweat, is not an homonym of the old "tweet", but is a "tweak" and a fast way to say "To Eat!" ;) The pitch is simple, and techy people should get it right away: Tweat, is the git of the kitchen. How? you may say. It's easy: You browse recipes, then you choose one or more, at first we aggregate ingredients, and pre-cooked elements (equivalent to staging), then once that is done, we move to the execution stage (the commit). From e56598c09ce3a1264c93595a6039fd428b57de81 Mon Sep 17 00:00:00 2001 From: Soheib Date: Fri, 10 Jan 2025 17:43:09 +0100 Subject: [PATCH 3/3] add search and timer features, add local storage feature --- index.html | 43 +++-- script.js | 449 +++++++++++++++++++++++++++++++++++++++++++++++++++++ scripts.js | 38 ++--- styles.css | 7 +- 4 files changed, 500 insertions(+), 37 deletions(-) create mode 100644 script.js diff --git a/index.html b/index.html index 70d9bc5..bb729aa 100644 --- a/index.html +++ b/index.html @@ -8,25 +8,40 @@
- +
+

You have spent here

+
+
+

Make a timer for less than 60min

+ +
-
-
-

- recipe illustration -
    - -
-

- -

-
+
+
+
- +
+
+
+ + + + + +
+ +
@@ -35,6 +50,6 @@

- + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..5cf2ee5 --- /dev/null +++ b/script.js @@ -0,0 +1,449 @@ +// getting the elements from the page +const recipesContainer = document.querySelector('.recipesContainer'); +const recipesSearchResults = document.querySelector('.search-results'); +const recipeName = document.querySelector('.recipe_name'); +const recipeImg = document.querySelector('.recipeImg'); +const ingredientsList = document.querySelector('.ingredientsList'); +const cookingSteps = document.querySelector('.cookingSteps'); +const ingredientNumber = document.querySelector('.number-seach-input'); +const keywordInput = document.querySelector('.keyword-seach-input'); +const keywordSearchBtn = document.querySelector('.keyword-search-btn'); +const ingredientSearchBtn = document.querySelector('.ingr-nbr-find-btn'); +const timeCounterContainer = document.querySelector('.time-counter'); +const timeCount = document.querySelector('.time-count'); +const durationUnit = document.querySelector('.duration-unit') +const timerContainer = document.querySelector('.timer-container'); +const minutesInput = document.querySelector('.time-amount-input'); +const setTimerBtn = document.querySelector('.set-timer-btn'); +const timerState = document.querySelector('.timer-state') + +//load previous added recipes from local storage, or initialize an empty list in case this is used for the first time +const userRecipes = JSON.parse(localStorage.getItem("data")) || []; +// the list of all recipes, will be an array of objects, to facilitate iteration and ordering +//the list of units that are used in the recipes +const unitTypes = { + weight: ["g", "kg"], + volume: ["ml", "dl", "l", "cup", "tbsp", "tsp"], + counts: ["piece", "dozen", "bottle", "pack", "clove"] + + // shortcuts + // g = unitTypes.weight[0] kg = unitTypes.weight[1] + // ml = unitTypes.volume[0] ld =ml = unitTypes.volume[1] l = unitTypes.volume[2] cup = unitTypes.volume[3] tbsp = unitTypes.volume[4] tsp = unitTypes.volume[5] + // pieces = unitTypes.counts[0] dozen = unitTypes.counts[1] bottle = unitTypes.counts[2] pack = unitTypes.counts[3] clove = unitTypes.counts[4] +}; +const builtInRecipes = [ + { + id: "glogg00001", + title: "Gløgg", + pictureLink: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Gl%C3%B6gg_kastrull.JPG/800px-Gl%C3%B6gg_kastrull.JPG", + type: "Dinner", + pitch: "easy sweet and spicy mulled wine", + ingredients: [ + { name: "Orange zest", amount: "0.5", unit: unitTypes.counts[0] }, + { name: "Water", amount: "200", unit: unitTypes.volume[0] }, + { name: "Sugar", amount: "275", unit: unitTypes.weight[0] }, + { name: "Whole cloves", amount: "5", unit: unitTypes.counts[0] }, + { name: "Cinnamon sticks", amount: "2", unit: unitTypes.counts[0] }, + { name: "Spice", amount: "0" }, // the amount of 0 should be later referenced to render "to taste" in the browser + { name: "Red wine", amount: "1", unit: unitTypes.counts[2] }, + { name: "Raisins", amount: "100", unit: unitTypes.weight[0] }, + { name: "Slipped Almonds", amount: "50", unit: unitTypes.weight[0] }, + ], + description: "Mix everything, heat it, and you are good to go!"}, + + { + id: "bnizen00002", + title: "Bniwen", + pictureLink: "https://lifestyleofafoodie.com/wp-content/uploads/2020/05/Almond-no-bake-energy-balls-with-chocolate-crunch-13-of-18.jpg", + type: "Dessert", + pitch: "delightful and easy, guaranteed happiness with each bite", + ingredients: [ + { name: "crackers", amount: "1", unit: unitTypes.volume[3] }, + { name: "butter", amount: "0.75", unit: unitTypes.volume[3] }, + { name: "Vanilla sugar", amount: "3", unit: unitTypes.volume[4] }, + { name: "Turkish halva", amount: "0.75", unit: unitTypes.volume[3] }, + { name: "Almond flour", amount: "0.5", unit: unitTypes.volume[3] }, + { name: "Nut mix", amount: "0.5", unit: unitTypes.volume[3] }, + { name: "Licorice pulver", amount: "1", unit: unitTypes.volume[4] }, + { name: "Cocoa pulver", amount: "3", unit: unitTypes.volume[4] }, + { name: "Dark chocolate", amount: "120", unit: unitTypes.weight[0] }, + + ], + description: "Process the nuts. Mix everything, cover in melted chocolate, and you are good to go!",}, + { + id: "lasgn00003", + title: "Classic Lasagna", + pictureLink: "https://upload.wikimedia.org/wikipedia/commons/e/e8/Lasagna_%28cropped%29.jpg", + type: "Dinner", + pitch: "Rich and cheesy layers of goodness", + ingredients: [ + { name: "Lasagna noodles", amount: "12", unit: unitTypes.counts[0] }, + { name: "Ground beef", amount: "500", unit: unitTypes.weight[0] }, + { name: "Tomato sauce", amount: "2", unit: unitTypes.volume[3] }, + { name: "Ricotta cheese", amount: "1", unit: unitTypes.volume[3] }, + { name: "Mozzarella cheese", amount: "2", unit: unitTypes.volume[3] }, + { name: "Parmesan cheese", amount: "0.5", unit: unitTypes.volume[3] }, + { name: "Onion", amount: "1", unit: "" }, + { name: "Garlic", amount: "2", unit: unitTypes.counts[4] }, + { name: "Olive oil", amount: "2", unit: unitTypes.volume[4] }, + ], + description: "Layer noodles, meat sauce, and cheeses. Bake until bubbly and golden.", + }, + { + id: "ratat00004", + title: "Ratatouille", + pictureLink: "https://upload.wikimedia.org/wikipedia/commons/2/27/Ratatouille.jpg", + type: "Lunch", + pitch: "A healthy French veggie medley", + ingredients: [ + { name: "Eggplant", amount: "1", unit: "" }, + { name: "Zucchini", amount: "1", unit: "" }, + { name: "Bell peppers", amount: "2", unit: "" }, + { name: "Tomatoes", amount: "3", unit: "" }, + { name: "Garlic", amount: "2", unit: unitTypes.counts[4] }, + { name: "Olive oil", amount: "3", unit: unitTypes.volume[4] }, + { name: "Thyme", amount: "1", unit: unitTypes.volume[5] }, + { name: "Salt", amount: "0", unit: "" }, + { name: "Pepper", amount: "0", unit: "" }, + ], + description: "Sauté vegetables, layer them in a dish, and bake until tender.", + }, + { + id: "pesto00005", + title: "Pesto Pasta", + pictureLink: "https://upload.wikimedia.org/wikipedia/commons/8/81/Pesto_pasta.jpg", + type: "Lunch", + pitch: "Simple and refreshing Italian flavors", + ingredients: [ + { name: "Pasta", amount: "250", unit: unitTypes.weight[0] }, + { name: "Basil leaves", amount: "2", unit: unitTypes.volume[3] }, + { name: "Pine nuts", amount: "2", unit: unitTypes.volume[4] }, + { name: "Garlic", amount: "1", unit: unitTypes.counts[4] }, + { name: "Parmesan cheese", amount: "0.5", unit: unitTypes.volume[3] }, + { name: "Olive oil", amount: "0.25", unit: unitTypes.volume[3] }, + { name: "Salt", amount: "0", unit: "" }, + { name: "Pepper", amount: "0", unit: "" }, + ], + description: "Blend pesto ingredients, mix with cooked pasta, and serve.", + }, + { + id: "tirsm00006", + title: "Tiramisu", + pictureLink: "https://upload.wikimedia.org/wikipedia/commons/0/04/Tiramisu_with_spoon.jpg", + type: "Dessert", + pitch: "The classic creamy Italian delight", + ingredients: [ + { name: "Ladyfingers", amount: "300", unit: unitTypes.weight[0] }, + { name: "Mascarpone cheese", amount: "500", unit: unitTypes.weight[0] }, + { name: "Espresso", amount: "2", unit: unitTypes.volume[3] }, + { name: "Cocoa powder", amount: "2", unit: unitTypes.volume[4] }, + { name: "Egg yolks", amount: "4", unit: "" }, + { name: "Sugar", amount: "0.5", unit: unitTypes.volume[3] }, + { name: "Whipping cream", amount: "1", unit: unitTypes.volume[3] }, + ], + description: "Layer mascarpone cream and coffee-dipped ladyfingers. Chill and dust with cocoa.", + }, + { + id: "shak00007", + title: "Shakshuka", + pictureLink: "https://upload.wikimedia.org/wikipedia/commons/0/0e/Shakshouka.jpg", + type: "Breakfast", + pitch: "A hearty and flavorful breakfast dish", + ingredients: [ + { name: "Eggs", amount: "4", unit: "" }, + { name: "Tomatoes", amount: "4", unit: "" }, + { name: "Bell pepper", amount: "1", unit: "" }, + { name: "Onion", amount: "1", unit: "" }, + { name: "Garlic", amount: "2", unit: unitTypes.counts[4] }, + { name: "Olive oil", amount: "2", unit: unitTypes.volume[4] }, + { name: "Cumin", amount: "1", unit:unitTypes.volume[5] }, + { name: "Paprika", amount: "1", unit: unitTypes.volume[5] }, + { name: "Cilantro", amount: "0", unit: "" }, + ], + description: "Cook vegetables in a skillet, add eggs, and let them cook to desired doneness.", + }, + { + id: "cckch00008", + title: "Chocolate Chip Cookies", + pictureLink: "https://upload.wikimedia.org/wikipedia/commons/6/69/Chocolate_Chip_Cookies_-_kimberlykv.jpg", + type: "Dessert", + pitch: "Soft and chewy, a timeless classic", + ingredients: [ + { name: "Butter", amount: "1", unit: unitTypes.volume[3] }, + { name: "Sugar", amount: "1", unit: unitTypes.volume[3] }, + { name: "Brown sugar", amount: "1", unit: unitTypes.volume[3] }, + { name: "Eggs", amount: "2", unit: "" }, + { name: "Vanilla extract", amount: "1", unit: unitTypes.volume[5] }, + { name: "Flour", amount: "2.5", unit: unitTypes.volume[3] }, + { name: "Baking soda", amount: "1", unit: unitTypes.volume[5] }, + { name: "Salt", amount: "0.5", unit: unitTypes.volume[5] }, + { name: "Chocolate chips", amount: "2", unit: unitTypes.volume[3] }, + ], + description: "Mix wet and dry ingredients, fold in chocolate chips, and bake until golden.", + }, + { + id: "ramen00009", + title: "Ramen Noodles", + pictureLink: "https://upload.wikimedia.org/wikipedia/commons/3/39/Ramen_by_guilhem_vellut.jpg", + type: "Lunch", + pitch: "Quick and satisfying noodle bowl", + ingredients: [ + { name: "Ramen noodles", amount: "2", unit: "packs" }, + { name: "Chicken broth", amount: "4", unit: unitTypes.volume[3] }, + { name: "Soy sauce", amount: "2", unit: unitTypes.volume[4] }, + { name: "Ginger", amount: "1", unit: unitTypes.volume[5]}, + { name: "Garlic", amount: "2", unit: unitTypes.counts[4] }, + { name: "Eggs", amount: "2", unit: "" }, + { name: "Green onions", amount: "2", unit: "" }, + { name: "Sesame oil", amount: "1", unit: unitTypes.volume[5] }, + ], + description: "Simmer broth, add noodles, and top with eggs and green onions.", + }, + { + id: "pcklz00010", + title: "Pickled Vegetables", + pictureLink: "https://upload.wikimedia.org/wikipedia/commons/1/19/Japanese_picked_vegetables.jpg", + type: "Side Dish", + pitch: "Crisp, tangy, and versatile", + ingredients: [ + { name: "Cucumber", amount: "1", unit: "" }, + { name: "Carrots", amount: "2", unit: "" }, + { name: "Vinegar", amount: "1", unit: unitTypes.volume[3] }, + { name: "Water", amount: "1", unit: unitTypes.volume[3] }, + { name: "Sugar", amount: "2", unit: unitTypes.volume[4] }, + { name: "Salt", amount: "1", unit: unitTypes.volume[5] }, + { name: "Garlic", amount: "1", unit: unitTypes.counts[4] }, + ], + description: "Mix brine ingredients, pour over sliced vegetables, and refrigerate.", + }, + { + id: "pancake0011", + title: "Pancakes", + pictureLink: "https://upload.wikimedia.org/wikipedia/commons/a/a1/Pancakes_with_maple_syrup.jpg", + type: "Breakfast", + pitch: "Fluffy and delicious, perfect for mornings", + ingredients: [ + { name: "Flour", amount: "1", unit: unitTypes.volume[3] }, + { name: "Milk", amount: "1", unit: unitTypes.volume[3] }, + { name: "Egg", amount: "1", unit: "" }, + { name: "Baking powder", amount: "1", unit: unitTypes.volume[5] }, + { name: "Sugar", amount: "2", unit: unitTypes.volume[4] }, + { name: "Butter", amount: "2", unit: unitTypes.volume[4] }, + { name: "Salt", amount: "0.25", unit: unitTypes.volume[5] }, + ], + description: "Mix ingredients, pour batter onto a skillet, and cook until golden brown.", + }, + { + id: "smooth00012", + title: "Berry Smoothie", + pictureLink: "https://upload.wikimedia.org/wikipedia/commons/6/6f/Smoothie.jpg", + type: "Drink", + pitch: "Refreshing and packed with nutrients", + ingredients: [ + { name: "Mixed berries", amount: "1", unit: unitTypes.volume[3] }, + { name: "Banana", amount: "1", unit: "" }, + { name: "Greek yogurt", amount: "0.5", unit: unitTypes.volume[3] }, + { name: "Milk", amount: "1", unit: unitTypes.volume[3] }, + { name: "Honey", amount: "1", unit: unitTypes.volume[4] }, + ], + description: "Blend all ingredients together until smooth and creamy.", + } + +] + + +//getting userRecipes from local storage +const userRecipesKey = "userRecipes"; // Key for local storage + +// Load user-created recipes from local storage +const loadUserRecipes = () => { + const storedRecipes = localStorage.getItem(userRecipesKey); + return storedRecipes ? JSON.parse(storedRecipes) : []; +}; + +//consolidating all recipes in one list +const getAllRecipes = () => { + const userRecipes = loadUserRecipes(); + return [...builtInRecipes, ...userRecipes]; + }; +const allRecipes = getAllRecipes() + + +//a function to render a preview card for each recipe inside a given container "parent" +const renderRecipeCard = (parent, array) =>{ + parent.innerHTML = "" + array.forEach((obj)=>{ + + const recipeCard = document.createElement('div'); + recipeCard.classList.add('recipe-preview'); + + const recipeTitle = document.createElement('h3'); + recipeTitle.innerText = obj.title; + recipeCard.appendChild(recipeTitle); + + const recipeImage = document.createElement('img'); + recipeImage.src = obj.pictureLink; + recipeImage.alt = obj.title; + recipeCard.appendChild(recipeImage) + + const recipePitch = document.createElement('p'); + recipePitch.innerText = obj.pitch; + recipeCard.appendChild(recipePitch); + + + + parent.appendChild(recipeCard) + + //making cards expand on click + recipeCard.addEventListener("click", ()=>{ + if (!recipeCard.querySelector('.ingredients') && !recipeCard.querySelector('.description')) { + const ingredientsList = document.createElement('ul'); + ingredientsList.classList.add('ingredients'); + obj.ingredients.forEach((ingredient) => { + const listItem = document.createElement('li'); + listItem.innerText = ingredient.amount > 0 + ? `${ingredient.amount || ""} ${ingredient.unit || ""} of ${ingredient.name}` + : `${ingredient.name}: to taste`; + ingredientsList.appendChild(listItem); + }); + recipeCard.appendChild(ingredientsList); + + const recipeDescription = document.createElement('p'); + recipeDescription.innerText = `Description: ${obj.description}`; + recipeDescription.classList.add('description'); + recipeCard.appendChild(recipeDescription); + + const collapseButton = document.createElement('button'); + collapseButton.innerText = 'Collapse'; + collapseButton.classList.add('collapse-button'); + recipeCard.appendChild(collapseButton); + + // Make a card collapse + collapseButton.addEventListener("click", (e) => { + e.stopPropagation(); // Prevent triggering the card click event + ingredientsList.remove(); + recipeDescription.remove(); + collapseButton.remove(); + }); + } + }) + + + }) +} + +//rendering all recipes +renderRecipeCard(recipesContainer, allRecipes); + +//find recipes by number of ingredients +const getRecipeByIngredientNbr = (num)=>{ + const foundRecipes = []; + allRecipes.forEach((obj)=>{ + if(obj.ingredients.length===num) { + foundRecipes.push(obj); + } + }) + return foundRecipes; +} + + +ingredientSearchBtn.addEventListener("click", (e)=> { + const num = Math.sqrt((parseInt(ingredientNumber.value) ** 2)); // because I'm lazy I am getting the square root of the square of the input, to make sure it's not a negative value + result = getRecipeByIngredientNbr(num); + renderRecipeCard(recipesSearchResults, result); + +}) + + + +// finding recipes by keywords +const getRecipeByKeyword = (array, str) =>{ + const foundRecipes = []; + //If I understand regex correctly, this is supposed to catch anything that is not a space or a letter + const regex = /[^a-zA-Z\s]/g; + const cleanStr = str.replace(regex, "").toLowerCase(); + //handling empty inputs + if (!cleanStr.trim()) { + alert("Please enter a valid keyword."); + return; + }; + array.forEach((obj)=>{ + let found = false; + for (const key in obj) { + const value = obj[key]; + // check for each value if it's a string + if (typeof value === "string" && value.includes(cleanStr)){ + found = true; + break + }; + // check for the value if it's an array to handle the case of ingredients + if ( Array.isArray(value)) { + value.forEach((element)=>{ + for (const elementKey in element){ + const elementValue = element[elementKey] + if (elementValue.includes(cleanStr)){ + found = true; + break + } + } + }) + } + } + if (found) { + foundRecipes.push(obj) + } + }); + return foundRecipes + +} + +keywordSearchBtn.addEventListener("click", (e)=>{ + recipesSearchResults.innerHTML = "" + + result = getRecipeByKeyword(allRecipes, keywordInput.value); + renderRecipeCard(recipesSearchResults, result); + +} ) + + +//time counter function +const timeCounter= ()=>{ + let seconds = 0; + setInterval(()=>{ + + seconds++; + timeCount.innerText = seconds; + durationUnit.textContent = " seconds"; + if (seconds>59){ + timeCount.innerText = seconds%60; + let minutes = Math.floor(seconds/60); + durationUnit.textContent = ` seconds and ${minutes} minutes`; + if(minutes > 59){ + alert('There is no way you are on this page for this long! Thank you for your attention'); + }; + }; + }, 1000); + +}; +//start the count +timeCounter(); + +//user timer +const TimeIsUp = ()=> { + alert('The timer is Up!!!') +} + +setTimerBtn.addEventListener("click", ()=>{ + const timeAmount = Math.sqrt((parseInt(minutesInput.value) ** 2)) + const timeInMlSec = timeAmount * 60000 // converting the amount of time to milliseconds + timerState.textContent = `A timer has been set for ${timeAmount} minutes`; + setTimeout(()=>{ + alert("The time is up!"); + timerState.textContent = ""; + minutesInput.value = "" + }, timeInMlSec); + + +}) + + diff --git a/scripts.js b/scripts.js index 616ebee..35ea983 100644 --- a/scripts.js +++ b/scripts.js @@ -1,18 +1,18 @@ const recipeObject = { id: 1, title: "Gløgg", - picture_url: + pictureLink: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Gl%C3%B6gg_kastrull.JPG/800px-Gl%C3%B6gg_kastrull.JPG", ingredients: [ - { NAME: "Orange zest", AMOUNT: "0.5" }, - { NAME: "Water", AMOUNT: "200 ml" }, - { NAME: "Sugar", AMOUNT: "275 g" }, - { NAME: "Whole cloves", AMOUNT: "5" }, - { NAME: "Cinnamon sticks", AMOUNT: "2" }, - { NAME: "Spice", AMOUNT: undefined }, - { NAME: "Bottle of red wine", AMOUNT: "1" }, - { NAME: "Raisins", AMOUNT: "100 g" }, - { NAME: "Slipped Almonds", AMOUNT: "50 g" }, + { name: "Orange zest", amount: "0.5" }, + { name: "Water", amount: "200 ml" }, + { name: "Sugar", amount: "275 g" }, + { name: "Whole cloves", amount: "5" }, + { name: "Cinnamon sticks", amount: "2" }, + { name: "Spice", amount: undefined }, + { name: "Bottle of red wine", amount: "1" }, + { name: "Raisins", amount: "100 g" }, + { name: "Slipped Almonds", amount: "50 g" }, ], description: "Mix everything, heat it, and you are good to go!", }; @@ -26,11 +26,11 @@ const cookingSteps = document.querySelector('.cookingSteps') // linking the elements to the recipe's object recipeName.innerText = recipeObject.title -recipeImg.src = recipeObject.picture_url +recipeImg.src = recipeObject.pictureLink for (let element of recipeObject.ingredients) { const listItem = document.createElement('li') - listItem.innerText = `${element.AMOUNT} of ${element.NAME}`; + listItem.innerText = `${element.amount} of ${element.name}`; ingredientsList.appendChild(listItem) } @@ -75,7 +75,8 @@ function addName(event){
- +
+ ` parent.insertAdjacentHTML('beforeend', HTMLString); const addNewIngredient = document.querySelector('.addIngredient') @@ -88,18 +89,11 @@ function addIngredient(event) { const ingredientUnitInput = document.querySelector('#unitDropDown'); const newIngredient = { - NAME: ingredientNameInput.value, - AMOUNT: `${ingredientAmountInput.value} ${ingredientUnitInput.value}` + name: ingredientNameInput.value, + amount: `${ingredientAmountInput.value} ${ingredientUnitInput.value}` }; - newRecipeObject.ingredients.push(newIngredient); - - // Clear inputs for the next ingredient - ingredientNameInput.value = ''; - ingredientAmountInput.value = ''; - ingredientUnitInput.value = 'gr'; - console.log(newRecipeObject.ingredients); } \ No newline at end of file diff --git a/styles.css b/styles.css index a0cdbb9..1fff491 100644 --- a/styles.css +++ b/styles.css @@ -85,4 +85,9 @@ button, input, select, textarea { color: inherit; } -/*App style*/ \ No newline at end of file +/*App style*/ + +img { + height: 50px; + width: 50px; +} \ No newline at end of file