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/assets/._full_screen_bg.png b/assets/._full_screen_bg.png new file mode 100644 index 0000000..c137076 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..3bc5708 Binary files /dev/null and b/assets/._mobile_bg.png differ 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..48f221a 100644 --- a/index.html +++ b/index.html @@ -3,29 +3,51 @@ + + Tweat - +
- +
+

You have spent here

+
+
+

Make a timer for less than 60min

+ +
+ -
-
-

- recipe illustration -
    - -
-

- -

-
+
+
+
- +
+
+
+ + + + + +
+ +
@@ -34,6 +56,6 @@

- + \ 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..4984fec 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,232 @@ 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 +} + + +// 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.", +// } + +// ] \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..616b4f7 --- /dev/null +++ b/styles.css @@ -0,0 +1,157 @@ +/*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*/ + + +body { + font-family: 'Kumbh Sans'; + background-color: #E0E4D9; + display: flex; + flex-direction: column; + align-items: center; +} + +section { + + max-width: 1080px; +} + +.banner { + background-color: #20372c; + padding: 1rem; + margin: 1rem 0; + 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; + position: relative; +} +.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); + +} \ No newline at end of file