diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..72f1563 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +._* \ No newline at end of file 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). diff --git a/app.js b/app.js new file mode 100644 index 0000000..9df0a93 --- /dev/null +++ b/app.js @@ -0,0 +1,438 @@ + +// getting the elements from the page (timers) +const topSection = document.querySelector('.top'); +window.addEventListener('scroll', () => { + topSection.style.top = '0'; + +}); + +// 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 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') +const addRecipeButton = document.querySelector('.addRecipeButton'); +const addRecipeForm = document.querySelector('.addRecipeForm'); +const addNewIngredientsBtn = document.querySelector('.addNewIngredientsBtn'); +// the elements that will hold the new recipe +const newRecipeName = document.querySelector('.newRecipeName'); +const newRecipeImg = document.querySelector('.newRecipeImage'); +const newRecipeType = document.querySelector('.newRecipeType'); +const newRecipePitch = document.querySelector('.newRecipePitch'); +const newIngredientName = document.querySelector('.newRecipeIngredientName'); +const newIngredientAmount = document.querySelector('.newIngredientAmount'); +const newIngredientUnit = document.querySelector('.newIngredientUnit'); +const newRecipeDescription = document.querySelector('.newRecipeDescription'); +const moreIngredientsContainer = document.querySelector('.moreIngredients'); + +// 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] +}; +//fetching the recipes +let builtInRecipes = [] +async function getRecipes() { + const source = "https://raw.githubusercontent.com/siderdk/siderdk.github.io/refs/heads/main/api/tweatData.json"; + const response = await fetch(source); + builtInRecipes = await response.json(); + return builtInRecipes; +} + +// load user-created recipes from local storage +const userRecipesKey = "userRecipes"; +const loadUserRecipes = () => { + const storedRecipes = localStorage.getItem(userRecipesKey); + return storedRecipes ? JSON.parse(storedRecipes) : []; +}; + +//consolidating all recipes in one list +const getAllRecipes = async () => { + await getRecipes(); + const userRecipes = loadUserRecipes(); + return [...builtInRecipes, ...userRecipes]; +}; + +getAllRecipes() + .then((allRecipes) => { + console.log("recipes fetched", allRecipes); + }) + .catch((error) => { + console.error("An error occurred while fetching recipes:", error); + }); + +const allRecipes = await getAllRecipes(); + + +//a function to render a preview card for each recipe inside a given container "parent" +async function renderRecipeCard (parent, recipe) { + parent.innerHTML = "" + recipe.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; + recipePitch.classList.add('pitch') + recipeCard.appendChild(recipePitch); + + + parent.appendChild(recipeCard); + + //making cards expand on click + + expandCollapseCard(recipeCard, obj); + + }); +}; + +renderRecipeCard(recipesContainer, allRecipes); + +// expand and collapse the recipe card +async function expandCollapseCard (recipeCard, obj) { + recipeCard.addEventListener("click", ()=>{ + if (!recipeCard.querySelector('.ingredients') && !recipeCard.querySelector('.description')) { + const recipePitch = recipeCard.querySelector('p'); + recipePitch.style.display = "none"; + recipeCard.style.height = "auto"; + recipeCard.style.width = "25rem"; + recipeCard.style.fontsize = "2rem"; + const ingredientsList = document.createElement('ul'); + ingredientsList.classList.add('ingredients'); + obj.ingredients.forEach((ingredient) => { + const listItem = document.createElement('li'); + if (ingredient.amount > 0) {listItem.innerText = `${ingredient.amount || ""} ${ingredient.unit || ""} of ${ingredient.name}` + } else {listItem.innerText = `${ingredient.name}: to taste`}; + + ingredientsList.appendChild(listItem); + listItem.style.margin = "0.2rem"; + + }); + + recipeCard.appendChild(ingredientsList); + ingredientsList.style.margin = "0.5rem"; + + const recipeDescription = document.createElement('fieldset'); + recipeDescription.innerHTML = `Description +
${obj.description}
`; + recipeDescription.classList.add('description'); + recipeCard.appendChild(recipeDescription); + + const addToListBtn = document.createElement('button'); + addToListBtn.innerText = 'Add to shopping list'; + addToListBtn.classList.add('add-to-list-button'); + recipeCard.appendChild(addToListBtn); + + const collapseButton = document.createElement('button'); + collapseButton.innerText = 'Collapse'; + collapseButton.classList.add('collapse-button'); + recipeCard.appendChild(collapseButton); + + recipeCard.style.position = "fixed"; + recipeCard.style.top = "50%"; + recipeCard.style.left = "50%"; + recipeCard.style.transform = "translate(-50%, -50%)"; + recipeCard.style.zIndex = "3"; + // Create and style the overlay + const overlay = document.createElement('div'); + overlay.style.position = "fixed"; + overlay.style.top = "0"; + overlay.style.left = "0"; + overlay.style.width = "100vw"; + overlay.style.height = "100vh"; + overlay.style.backgroundColor = "rgba(0, 0, 0, 0.5)"; + overlay.style.zIndex = "1"; // Behind the card + document.body.appendChild(overlay); + + //if the recipe is editable, add an edit button and delete button + if (obj.edit) { + const editButton = document.createElement('a'); + editButton.innerHTML = ``; + editButton.classList.add('edit-recipe-btn'); + recipeCard.appendChild(editButton); + const deleteButton = document.createElement('a'); + deleteButton.innerHTML = `trash`; + deleteButton.classList.add('delete-recipe-btn'); + recipeCard.appendChild(deleteButton); + } + + + // Make a card collapse + collapseButton.addEventListener("click", (e) => { + e.stopPropagation(); // Prevent triggering the card click event + ingredientsList.remove(); + recipeDescription.remove(); + collapseButton.remove(); + addToListBtn.remove(); + recipeCard.style.width = "15rem"; + recipePitch.style.display = "unset"; + recipeCard.style.transform = ""; + recipeCard.style.position = ""; + recipeCard.style.top = ""; + recipeCard.style.left = ""; + recipeCard.style.zIndex = ""; + document.body.removeChild(overlay); + + // Remove the edit and delete buttons if they exist (for some reason I have to redifine them because the console says they are out of scope) + if (obj.edit) { + const editButton = recipeCard.querySelector('.edit-recipe-btn'); + editButton.remove(); + const deleteButton = recipeCard.querySelector('.delete-recipe-btn'); + deleteButton.remove(); + } + + }); +} + }) +}; + +//find recipes by number of ingredients and render them +const getRecipeByIngredientNbr = (recipeslist, num)=>{ + const foundRecipes = []; + recipeslist.forEach((recipe)=>{ + if(recipe.ingredients.length===num) { + foundRecipes.push(recipe); + } + }) + return foundRecipes; +} + +ingredientSearchBtn.addEventListener("click", (e)=> { + const regex = /^(|[^0-9]|[0-9]*[^0-9]|)$/; // regex to check if the input is a positive number + const str = ingredientNumber.value + const num = parseInt(str.replace(regex, "")); // parsing the number from the input + const result = getRecipeByIngredientNbr(allRecipes, num); + if (num===0) {renderRecipeCard(recipesContainer, allRecipes)} else {renderRecipeCard(recipesContainer, result)} + ; +}) +ingredientNumber.addEventListener("keydown", (e) => { + if (e.key === "Enter") { + const regex = /^(|[^0-9]|[0-9]*[^0-9]|)$/; // regex to check if the input is a positive number + const str = ingredientNumber.value; + const num = parseInt(str.replace(regex, ""), 10); // parsing the number from the input + const result = getRecipeByIngredientNbr(allRecipes, num); + + if (num === 0) { + renderRecipeCard(recipesContainer, allRecipes); + } else { + renderRecipeCard(recipesContainer, result); + } + } +}); + + + +// finding recipes by keywords +const getRecipeByKeyword = (recipesList, 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()) { + return allRecipes; + } else { + recipesList.forEach((recipe)=>{ + // cheking only in the relevant parts of the recipe + let found = false; + if (recipe.title.toLowerCase().includes(cleanStr)) { + found = true + } else if (recipe.pitch.toLowerCase().includes(cleanStr)) { + found = true + } else if (recipe.description.toLowerCase().includes(cleanStr)) { + found = true + } else if (recipe.ingredients.some((ingredient)=> ingredient.name.toLowerCase().includes(cleanStr))) { + found = true; + }; + if (found) { + foundRecipes.push(recipe); + } + }); + return foundRecipes; + } +}; + + +keywordSearchBtn.addEventListener("click", async (e)=>{ + const result = getRecipeByKeyword(allRecipes, keywordInput.value); + renderRecipeCard(recipesContainer, result); +} ); +keywordInput.addEventListener("keydown", async (e)=>{ + const result = getRecipeByKeyword(allRecipes, keywordInput.value); + renderRecipeCard(recipesContainer, result); + } ) + +//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); + +}); + +// total time on the page +const timeCounter = () => { + const startTime = new Date(); // Record the time the user starts visiting the page + + setInterval(() => { + const currentTime = new Date(); // Get the current time + const timeElapsed = Math.floor((currentTime - startTime) / 1000); // Time difference in seconds + + // Convert the elapsed time to minutes and seconds + const seconds = timeElapsed % 60; + const minutes = Math.floor(timeElapsed / 60); + + // Update the display + + if (timeElapsed <59) { + timeCount.innerText = `${seconds} seconds`; + } else if (timeElapsed > 59 && timeElapsed < 119) { + timeCount.innerText = `${minutes} minute and ${seconds} seconds` + } else if (timeElapsed >= 120){timeCount.innerText = `${minutes} minutes and ${seconds} seconds`} + // Alert if user has been on the page for more than an hour + if (minutes > 59) { + alert("There is no way you are on this page for this long! Thank you for your attention"); + } + }, 1000); // Run every second +}; + +// Start the count +timeCounter(); + + +//adding a recipe functionality + +//the object that will hold the new recipe +let newRecipe = { + title: "", + id : `${Date.now()}`, + pictureLink: "", + type: "", + pitch: "", + ingredients: [ + { name: "", + amount: "", + unit: "" } + ], + description: "", + edit: true +}; +// a function to save recipes to local storage +const saveUserRecipes = (recipes) => { + localStorage.setItem(userRecipesKey, JSON.stringify(recipes)); +}; + +//a function to add a new recipe to the list of recipes +const addNewRecipe = (newRecipe) => { + const userRecipes = loadUserRecipes(); + userRecipes.push(newRecipe); + saveUserRecipes(userRecipes); +}; + + +// showing and resetting the form to add a new recipe +addRecipeButton.addEventListener('click', ()=>{ + if(addRecipeButton.innerText === "Add your recipe to the list") { + addRecipeButton.innerText = "cancel"; + addRecipeButton.style.background = "rgba(0, 0, 0, 0.75)"; + } else { + addRecipeButton.innerText = "Add your recipe to the list" + addRecipeButton.style.background = "linear-gradient(90deg, #036f11, #6fca3a)"; + resetNewRecipeForm(); + }; + addRecipeForm.classList.toggle("hidden"); + +}); + +//resetting the form +function resetNewRecipeForm() { + newRecipeName.value = ""; + newRecipeImg.value = ""; + newRecipeType.value = "--"; + newRecipePitch.value = ""; + newRecipeDescription.value = ""; + newIngredientName.value = ""; + newIngredientAmount.value = ""; + newIngredientUnit.value = ""; + moreIngredientsContainer.innerHTML = ""; + ingredientCount = 1; +} + + + +//adding a new ingredient to the new recipe +let ingredientCount = 1; +const maxIngredients = 20; +addNewIngredientsBtn.addEventListener('click', ()=>{ + if (ingredientCount < maxIngredients) { + moreIngredientsContainer.innerHTML += ` +
+ + + + `; + ingredientCount++; + } else { + alert(`You can only add up to ${ingredientCount} ingredients`) + } + +}); + + +function addRecipe() { + + +} \ No newline at end of file diff --git a/assets/full_screen_bg.png b/assets/full_screen_bg.png new file mode 100644 index 0000000..1a42034 Binary files /dev/null and b/assets/full_screen_bg.png differ diff --git a/assets/mobile_bg.png b/assets/mobile_bg.png new file mode 100644 index 0000000..375194a Binary files /dev/null and b/assets/mobile_bg.png differ diff --git a/index.html b/index.html index 1b30407..248438d 100644 --- a/index.html +++ b/index.html @@ -3,37 +3,116 @@ + + Tweat - + +
- +
+

You have spent here

+
+
+

Make a timer for less than 60min

+ +
- -
-
-

- recipe illustration -
    - -
-

- -

-
+ +
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+

Not impressed by what we have? check our feature below:

- - + +
-
-
+
- + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..4273325 --- /dev/null +++ b/script.js @@ -0,0 +1,240 @@ +// 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] +}; + +//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]; + }; + +//fetching the recipes and rendering them +let builtInRecipes = [] +async function getRecipes() { + const source = "https://raw.githubusercontent.com/siderdk/siderdk.github.io/refs/heads/main/api/tweatData.json" ; + const response = await fetch(source); + builtInRecipes = await response.json(); + const allRecipes = getAllRecipes(); + renderRecipeCard(recipesContainer, getAllRecipes()); + return allRecipes +} +getRecipes(); + + + +//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(); + }); + } + }) + + + }) +} + + +//find recipes by number of ingredients +const getRecipeByIngredientNbr = (array, num)=>{ + const foundRecipes = []; + array.forEach((obj)=>{ + if(obj.ingredients.length===num) { + foundRecipes.push(obj); + } + }) + return foundRecipes; +} + + +ingredientSearchBtn.addEventListener("click", async (e)=> { + const num = Math.sqrt((parseInt(ingredientNumber.value) ** 2)); // get a positive int out of num + const allRecipes = await getRecipes(); + const result = getRecipeByIngredientNbr(allRecipes, 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", async (e)=>{ + recipesSearchResults.innerHTML = "" + const allRecipes = await getRecipes(); + 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..2d65bbf 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,243 @@ 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); +} + + +// 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.", +// } + +// ] + +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] dl = 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] } \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..d322fb2 --- /dev/null +++ b/styles.css @@ -0,0 +1,553 @@ +/*The big reset*/ +*, +*::before, +*::before { + 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::before, +q::before, q::before { + 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*/ +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Kumbh Sans'; + background-color: rgb(224, 228, 217); + display: flex; + flex-direction: column; + align-items: center; +} +nav { + position: fixed; + top: 0; + right: 0; + margin: 2rem; + filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5)); + z-index: 99; +} +nav svg { + height: 3rem; + width: 3rem; + padding: 0.2rem; + cursor: pointer; + border: 1px solid #036f11; + border-radius: 100%; + filter: grayscale(80%); + background-color: rgb(224, 228, 217); +} + +nav svg:hover { + filter: grayscale(0%); +} + +nav .shoppingList { + z-index: 99; + +} + + + +section { + position: relative; + margin-top: 1rem; + margin-bottom: 1rem; + max-width: 1080px; +} + +.search-section, .recipes, .userInput, .footer { + background-color: rgb(224, 228, 217); + position: relative; +} + +.search-section::before, +.recipes::before, +.userInput::before, +.footer::before { + content: ''; + position: absolute; + top: -5rem; + left: -5rem; + width: calc(100% + 10rem); + height: calc(100% + 10rem); + background-color: rgb(224, 228, 217); + z-index: -1; +} + +.top { + position: fixed; + top: -7rem; + margin-bottom: 1rem; + display: flex; + flex-direction: column; + justify-content: space-between; + align-content: space-between; + transition: top 0.3s ease-in-out; + z-index: -5; +} + +.top div { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; +} + +.timer-container { + height: 5rem; +} + +.main { + margin-top: 7rem ; +} + +.banner { + position: relative; + background-color: rgb(32, 55, 44); + padding: 1rem; + border-radius: 1rem; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); + background-image: url('./assets/full_screen_bg.png'); + background-size: cover; + height: 700px; + width: 1080px; +} + +.banner h1 { + font-style: normal; + font-weight: 700; + font-size: 15rem; + line-height: 132%; + position: absolute; + top : 25%; + left: 20%; + letter-spacing: -0.02em; + color: #F5F5F5; + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); +} + +.banner .full-view-tag { + position: absolute; + top: 62%; + left: 23%; + font-style: normal; + font-weight: 300; + font-size: 2rem; + line-height: 132%; + letter-spacing: 0.02em; + color: #F5F5F5; + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + +} + +.banner .mobile-tag { + display: none; + position: absolute; + top: 61%; + left: 21%; + font-style: normal; + font-weight: 300; + font-size: 2rem; + line-height: 132%; + letter-spacing: 0.02em; + color: #F5F5F5; + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + +} + +.search-section { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} +.search-section div { + margin: 1rem; +} + +.search-section input, .top input { + border-radius: 0.5rem 0 0 0.5rem; + background-color: rgba(3, 111, 17, 0.05); + border-color: rgb(3, 111, 17); + border-style: solid; + border-width: 0.1em; + padding: 0.2rem; +} +.keyword-search-btn, .ingr-nbr-find-btn, .set-timer-btn { + border-radius: 0 0.5rem 0.5rem 0; + background-color: #036f11; + border-color: #036f11; + border-style: solid; + border-width: 0.1em; + padding: 0.2rem; + cursor: pointer; + color: #F5F5F5; + font-weight: 700; +} + +.userInput { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 1rem; +} + +.addRecipeButton:hover { + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); +} + +.recipesContainer { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + flex-wrap: wrap; +} + +.recipe-preview { + min-height: 22rem; + width: 15rem; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + margin: 0.5rem; + padding: 1rem; + border-radius: 0.5rem; + background-color: #F5F5F5; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + overflow: hidden; + transition: all 0.3s ease; + transition: max-height 1s ease, width 1s ease, box-shadow 1s ease; +} +.recipe-preview img { + width: 8rem; + height: 10rem; + object-fit: cover; + object-position: center; + border-radius: 0.5rem; + margin: 1rem; +} +.recipe-preview h3 { + margin-top: 0.5rem; + font-style: normal; + font-weight: 600; + font-size: 1rem; + line-height: 132%; + letter-spacing: -0.02em; + color: #000000; +} + +.recipe-preview .pitch { + padding: 0.5rem; + margin: 0.2rem; + font-weight: 300; + font-size: 1rem; + text-align: center; + line-height: 150%; +} +.recipe-preview .steps { + padding: 0.5rem; + margin: 0.2rem; + font-weight: 300; + font-size: 1rem; + letter-spacing: -0.02em; + text-align: justify; + line-height: 150%; +} +.recipe-preview legend { + font-weight: 600; +} + +.recipe-preview .description { + border: 1px #3f3f3f99 solid; + border-radius: 0.5rem; +} + + + +.add-to-list-button { + border-radius: 0.5rem; + background-color: #036f11; + padding: 0.5rem; + cursor: pointer; + color: #F5F5F5; + font-weight: 700; + margin: 0.5rem; + +} +.collapse-button { + border-radius: 0.5rem; + background-color: #2D2824; + border-style: solid; + border-width: 0.1em; + padding: 0.5rem; + cursor: pointer; + color: #F5F5F5; + font-weight: 700; + margin: 0.5rem; + +} + +.edit-recipe-btn, .delete-recipe-btn { + padding: 0.5rem; + cursor: pointer; + margin: 0.5rem; + position: absolute; + +} + +.delete-recipe-btn { + top: 0; + right: 0; +} + +.edit-recipe-btn { + top: 0; + left: 0; +} + + +.edit-recipe-btn svg { + fill: #036f11; + width: 2rem; + height: 2rem; + filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3)); +} + +.delete-recipe-btn svg { + fill: #ff0000; + width: 2rem; + height: 2rem; + filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3)); +} + +.addRecipeButton { + margin: 1rem; + border-radius: 0.5rem; + background: linear-gradient(90deg, #036f11, #6fca3a); + border-color: #036f11; + border-style: solid; + border-width: 0.1em; + padding: 0.5rem; + cursor: pointer; + color: #F5F5F5; + font-weight: 700; + text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + transition: box-shadow 0.3s ease-in-out; + +} + +.NewRecipeContainer button { + border-radius: 0 0.5rem 0.5rem 0; + background-color: #036f11; + border-color: #036f11; + border-style: solid; + border-width: 0.1em; + padding: 0.2rem; + cursor: pointer; + color: #F5F5F5; + font-weight: 700; +} + +.create_recipes { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 1rem; +} + +.create_recipes .addRecipeForm { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + +} + +.create_recipes input, .create_recipes .newRecipeType, .create_recipes .newRecipeDescription, .create_recipes .newIngredientUnit{ + background-color: rgba(3, 111, 17, 0.05); + border-color: rgb(3, 111, 17); + border-style: solid; + border-width: 0.1em; + padding: 0.2rem; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + border-radius: 0.5rem; + width: 100%; +} + +.create_recipes .newIngredientUnit { + width: auto; + border-radius: 0; + margin: 0; + padding: 0.2rem; +} + +.create_recipes .newRecipeIngredientName { + border-radius: 0.5rem 0 0 0.5rem; + width: auto; +} + +.create_recipes .newIngredientAmount { + border-radius: 0; + width: auto; + margin: 0; + +} + +.create_recipes .newRecipeDescription { + resize: vertical; +} + +.create_recipes button{ + border-radius: 0.5rem; + background-color: #036f11; + padding: 0.5rem; + cursor: pointer; + color: #F5F5F5; + font-weight: 700; + margin: 0.5rem; +} + +.create_recipes .addNewIngredientsBtn { + border-radius: 0 0.5rem 0.5rem 0; + margin: 0; + padding: 0.4rem; +} + +.create_recipes fieldset{ + display: flex; + flex-direction: column; +} +.submitRecipe{ + align-self: center; +} + +.create_recipes .hidden { + display: none; +} + +/*Responsiveness and Media queries*/ +@media (max-width: 800px) { + .banner { + background-image: url('./assets/mobile_bg.png'); + background-size: cover; + max-height: 400px; + width: 85vw; + min-width: 396px; + + } + + .banner h1 { + font-size: 5rem; + top: 40%; + left: 43%; + } + + .banner .full-view-tag { + display: none; + } + + .banner .mobile-tag { + position: absolute; + display: unset; + left: 40%; + } + + .search-section { + padding: 1rem; + flex-direction: column; + + } + .search-section div { + display: flex; + flex-direction: row; + justify-content: center; + align-items: space-between; + margin-bottom: 1rem; + } + + +} \ No newline at end of file