diff --git a/README.md b/README.md index 83ce771..1cb99a3 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,34 @@ -# 📊 Project: Complex API 2 - -### Goal: Use data returned from one api to make a request to another api and display the data returned - -### How to submit your code for review: - -- Fork and clone this repo -- Create a new branch called answer -- Checkout answer branch -- Push to your fork -- Issue a pull request -- Your pull request description should contain the following: - - (1 to 5 no 3) I completed the challenge - - (1 to 5 no 3) I feel good about my code - - Anything specific on which you want feedback! - -Example: -``` -I completed the challenge: 5 -I feel good about my code: 4 -I'm not sure if my constructors are setup cleanly... -``` +# 🍳 The Lazy Gourmet — Recipe + Nutrition Finder + +A chill little app for food lovers who want to **search recipes, see ingredients, and check nutrition facts** without overcomplicating things. +Find a dish, follow the steps, and cook it your way — easy, tasty, and stress-free. + +[Link to project](https://complex-recipe-api.vercel.app/) + +![screenshot](img/cook.png "The Lazy Gourmet — Recipe + Nutrition Finder") + +--- + +## How It’s Made: +**Tech used:** HTML, CSS, JavaScript + +The Lazy Gourmet uses two public APIs — **TheMealDB** for recipes and **OpenFoodFacts** for nutrition — to serve up ingredients, instructions, and nutrient info in one place. +The layout reads like a cookbook page, with a “Chef’s Note” ribbon and a cozy kitchen background that keeps everything warm and inviting. + +--- + +## Optimizations +- Add a “Favorites” section using localStorage +- Include measurement amounts for each ingredient +- Add smooth fade-ins for recipe steps +- Show related or random recipe suggestions + +--- + +## Lessons Learned +- Combining multiple APIs cleanly into a single user flow +- Building a responsive UI that works across devices +- Balancing design readability with visual texture (backgrounds + overlays) +- Keeping a project fun while still polished and functional + +--- diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..d13051e --- /dev/null +++ b/css/styles.css @@ -0,0 +1,410 @@ +* { + box-sizing: border-box; +} + +html, +body { + height: 100%; +} + +body.cookbook { + margin: 0; + color: #2a2a2a; + background: + url("../img/kitchen.avif") center top / cover no-repeat fixed; + font-family: "Lora", serif; + line-height: 1.6; + position: relative; +} + +body.cookbook::before { + content: ""; + position: fixed; + inset: 0; + background: rgba(255, 250, 240, 0.2); + pointer-events: none; +} + +.page { + max-width: 1000px; + margin: 40px auto 64px; + padding: 32px 24px; +} + +.header, +header { + text-align: center; + margin-bottom: 28px; +} + +.title { + font-family: "Playfair Display", serif; + font-weight: 800; + font-size: 60px; + color: #a4512b; + letter-spacing: 0.5px; + text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); +} + +.subtitle { + font-style: italic; + color: #713519; + font-size: 18px; + margin-top: 6px; +} + +.search { + background: rgba(255, 255, 255, 0.9); + border: 1px solid #d2cabc; + border-radius: 18px; + padding: 14px; + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); + width: fit-content; + margin: 0 auto 20px auto; + text-align: center; +} + +.label { + display: block; + font-weight: 600; + margin-bottom: 6px; + letter-spacing: 0.3px; +} + +.search-row { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; +} + +.input { + width: 160px; + padding: 10px 12px; + border: 1px solid #d2cabc; + border-radius: 10px; + font-size: 15px; + outline: none; + text-align: center; + min-width: 0; +} + +.input:focus { + border-color: #a4512b; + box-shadow: 0 0 0 3px rgba(164, 81, 43, 0.22); +} + +.btn { + background: #a4512b; + color: #fff; + border: none; + padding: 10px 14px; + border-radius: 10px; + font-weight: 700; + cursor: pointer; + white-space: nowrap; + transition: background 0.2s ease-in-out; +} + +.btn:hover { + background: #713519; +} + +.status { + margin: 14px 6px 0; + min-height: 1.4em; + color: #713519; + font-weight: 600; +} + +.recipe-card { + margin-top: 24px; + background: #fff; + border: 1px solid #d2cabc; + border-radius: 26px; + padding: 22px 20px 26px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); + position: relative; + overflow: visible; +} + +.recipe-card::before { + content: "Chef’s Note"; + position: absolute; + top: -10px; + left: 12px; + transform: rotate(-6deg); + background: #a4512b; + color: #fff; + padding: 8px 16px; + border-radius: 14px; + font-size: 13px; + letter-spacing: 0.4px; + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); + z-index: 2; +} + +.recipe-card::after { + position: absolute; + top: 10px; + left: 34px; + width: 6px; + height: 6px; + background: #fff; + border: 2px solid #713519; + border-radius: 50%; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); + z-index: 3; +} + +.recipe-head { + border-bottom: 1px dashed #d2cabc; + margin: 0 0 16px; + padding: 0 0 10px; +} + +.recipe-name { + font-family: "Playfair Display", serif; + font-weight: 700; + font-size: 36px; + margin: 0.1rem 0 0; + letter-spacing: 0.2px; +} + +.hero { + display: grid; + grid-template-columns: 320px 1fr; + gap: 22px; + align-items: start; + margin: 14px 0 8px; +} + +@media (max-width: 820px) { + .hero { + grid-template-columns: 1fr; + } +} + +.photo-frame { + background: #fff; + border: 1px solid #d2cabc; + border-radius: 18px; + padding: 10px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); + text-align: center; +} + +.photo-frame img { + width: 100%; + height: auto; + display: block; + border-radius: 12px; + object-fit: cover; +} + +.photo-cap { + margin-top: 8px; + font-size: 12px; + color: #7e7a74; + letter-spacing: 0.3px; +} + +.section-title { + font-family: "Playfair Display", serif; + font-weight: 700; + font-size: 18px; + margin: 6px 0 10px; + position: relative; +} + +.section-title::after { + content: ""; + display: block; + height: 3px; + width: 56px; + background: #a4512b; + margin-top: 6px; + border-radius: 2px; +} + +.nutrition { + background: linear-gradient(180deg, #fff, #fdfaf3); + border: 1px solid #d2cabc; + border-radius: 16px; + padding: 14px 14px 10px; +} + +.nutri-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px 18px; + margin: 10px 0 0; +} + +@media (max-width: 480px) { + .nutri-grid { + grid-template-columns: 1fr; + } +} + +.nutri-grid dt { + font-weight: 700; + color: #7e7a74; + font-size: 14px; +} + +.nutri-grid dd { + margin: 0; + font-weight: 600; +} + +.ingredients { + margin-top: 8px; +} + +.ingredient-list { + columns: 2 320px; + column-gap: 22px; + padding-left: 0; + list-style: none; + margin: 10px 0 0; +} + +.ingredient-list li { + break-inside: avoid; + position: relative; + padding-left: 28px; + margin: 8px 0; +} + +.ingredient-list li::before { + content: ""; + width: 16px; + height: 16px; + border: 2px solid #a4512b; + border-radius: 4px; + position: absolute; + left: 0; + top: 4px; + background: linear-gradient(180deg, #fff, #fff8f3); +} + +.instructions { + margin-top: 6px; +} + +.step-list { + counter-reset: step; + list-style: none; + padding-left: 0; + margin: 10px 0 0; +} + +.step-list>li { + counter-increment: step; + background: #fff; + border: 1px solid #d2cabc; + border-radius: 14px; + padding: 14px 16px; + margin: 12px 0; + box-shadow: 0 2px 0 rgba(0, 0, 0, 0.03); + position: relative; +} + +.step-list>li::before { + content: counter(step); + position: absolute; + left: -10px; + top: -10px; + width: 34px; + height: 34px; + display: grid; + place-items: center; + font-weight: 800; + font-family: "Playfair Display", serif; + color: #fff; + background: #a4512b; + border-radius: 50%; + box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08); +} + +.step-list>li:first-child::first-letter { + font-family: "UnifrakturCook", cursive; + font-size: 32px; + float: left; + line-height: 1; + padding: 2px 8px 0 0; + color: #713519; +} + +@media (max-width: 820px) { + .hero { + grid-template-columns: 1fr; + gap: 16px; + } + + .photo-frame { + max-width: 520px; + margin: 0 auto; + } + + .nutrition { + max-width: 620px; + margin: 0 auto; + } + + .ingredient-list { + columns: 2 260px; + } +} + +@media (max-width: 600px) { + .page { + padding: 20px 16px; + margin: 28px auto 48px; + } + + .title { + font-size: 40px; + } + + .search { + width: 100%; + max-width: 360px; + } + + .search-row { + flex-wrap: wrap; + } + + .input { + width: 100%; + } + + .btn { + width: 100%; + margin-top: 8px; + } + + .ingredient-list { + columns: 1; + } + + .nutri-grid { + grid-template-columns: 1fr; + } + + .recipe-card { + padding: 18px 16px 20px; + } +} + +@media (max-width: 400px) { + .title { + font-size: 34px; + } + + .subtitle { + font-size: 15px; + } +} \ No newline at end of file diff --git a/img/cook.png b/img/cook.png new file mode 100644 index 0000000..0dcce09 Binary files /dev/null and b/img/cook.png differ diff --git a/img/kitchen.avif b/img/kitchen.avif new file mode 100644 index 0000000..3d8a8df Binary files /dev/null and b/img/kitchen.avif differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..3b2acde --- /dev/null +++ b/index.html @@ -0,0 +1,81 @@ + + + + + + + + + + + +
+
+

The Lazy Gourmet

+

Easy dishes. Big flavor. Zero stress.

+
+ + + +

+ + +
+ + + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..f029b7b --- /dev/null +++ b/js/main.js @@ -0,0 +1,107 @@ +// grab elements +const form = document.querySelector("#recipeForm"); +const statusMsg = document.querySelector("#statusMsg"); +const info = document.querySelector("#info"); + +const recipeName = document.querySelector("#recipeName"); +const photo = document.querySelector("#photo"); +const ingredientsList = document.querySelector("#ingredients"); +const stepsList = document.querySelector("#steps"); + +const nutritionItem = document.querySelector("#nutritionItem"); +const calories = document.querySelector("#calories"); +const protein = document.querySelector("#protein"); +const carbs = document.querySelector("#carbs"); +const fat = document.querySelector("#fat"); + +// when form is submitted +form.addEventListener("submit", function (e) { + e.preventDefault(); + + const dish = document.querySelector("#dish").value.trim(); + if (!dish) { + statusMsg.textContent = "Please enter a dish name."; + return; + } + + info.hidden = true; + statusMsg.textContent = "Fetching recipe info..."; + + fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${dish}`) + .then(res => res.json()) + .then(data => { + const meal = data.meals ? data.meals[0] : null; + if (!meal) { + statusMsg.textContent = "Recipe not found."; + return; + } + + // display data to the dom + recipeName.textContent = meal.strMeal; + photo.src = meal.strMealThumb || ""; + photo.alt = meal.strMeal; + + // ingredients list + ingredientsList.innerHTML = ""; + for (let i = 1; i <= 20; i++) { + const ingredient = meal[`strIngredient${i}`]; + if (ingredient && ingredient.trim()) { + const li = document.createElement("li"); + li.textContent = ingredient.trim(); + ingredientsList.appendChild(li); + } + } + + // instructions list + const steps = (meal.strInstructions || "") + .split(".") + .map(step => step.trim()) + .filter(step => step.length > 0); + + stepsList.innerHTML = ""; + const ol = document.createElement("ol"); + for (let step of steps) { + const li = document.createElement("li"); + li.textContent = step + "."; + ol.appendChild(li); + } + stepsList.appendChild(ol); + + info.hidden = false; + statusMsg.textContent = "Fetching nutrition info..."; + + + const mainIngredient = (meal.strIngredient1 || dish).trim(); + const nutritionUrl = + `https://world.openfoodfacts.org/cgi/search.pl?search_terms=${mainIngredient}&search_simple=1&action=process&json=1&page_size=1`; + + fetch(nutritionUrl) + .then(r => r.json()) + .then(n => { + const product = n.products && n.products[0]; + const nut = (product && product.nutriments) || {}; + + nutritionItem.textContent = mainIngredient; + calories.textContent = nut["energy-kcal_100g"] + ? `${nut["energy-kcal_100g"]} kcal` + : "—"; + protein.textContent = nut["proteins_100g"] + ? `${nut["proteins_100g"]} g` + : "—"; + carbs.textContent = nut["carbohydrates_100g"] + ? `${nut["carbohydrates_100g"]} g` + : "—"; + fat.textContent = nut["fat_100g"] + ? `${nut["fat_100g"]} g` + : "—"; + + statusMsg.textContent = ""; + }) + .catch(() => { + statusMsg.textContent = "Could not load nutrition info."; + }); + }) + .catch(() => { + statusMsg.textContent = "Error loading recipe."; + }); +}); \ No newline at end of file