Skip to content

Commit 87aa8c5

Browse files
HuXn-WebDevHuXn-WebDev
committed
Meal Finder Project
1 parent efc36b6 commit 87aa8c5

File tree

3 files changed

+243
-0
lines changed

3 files changed

+243
-0
lines changed

‎098. Meal Finder/app.js

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
const searchMeal = async (e) => {
2+
e.preventDefault();
3+
4+
// Select Elements
5+
const input = document.querySelector(".input");
6+
const title = document.querySelector(".title");
7+
const info = document.querySelector(".info");
8+
const img = document.querySelector(".img");
9+
const ingredientsOutput = document.querySelector(".ingredients");
10+
11+
const showMealInfo = (meal) => {
12+
const { strMeal, strMealThumb, strInstructions } = meal;
13+
title.textContent = strMeal;
14+
img.style.backgroundImage = `url(${strMealThumb})`;
15+
info.textContent = strInstructions;
16+
17+
const ingredients = [];
18+
19+
for (let i = 1; i <= 20; i++) {
20+
if (meal[`strIngredient${i}`]) {
21+
ingredients.push(
22+
`${meal[`strIngredient${i}`]} - ${meal[`strMeasure${i}`]}`
23+
);
24+
} else {
25+
break;
26+
}
27+
}
28+
29+
const html = `
30+
${ingredients
31+
.map((ing) => `
  • ${ing}
    • `    )
    32+
    .join("")}
    33+
    `;
    34+
    35+
    ingredientsOutput.innerHTML = html;
    36+
    };
    37+
    38+
    const showAlert = () => {
    39+
    alert("Meal not found :(");
    40+
    };
    41+
    42+
    // Fetch Data
    43+
    const fetchMealData = async (val) => {
    44+
    const res = await fetch(
    45+
    `https://www.themealdb.com/api/json/v1/1/search.php?s=${val}`
    46+
    );
    47+
    48+
    const { meals } = await res.json();
    49+
    return meals;
    50+
    };
    51+
    52+
    // Get the user value
    53+
    const val = input.value.trim();
    54+
    55+
    if (val) {
    56+
    const meals = await fetchMealData(val);
    57+
    58+
    if (!meals) {
    59+
    showAlert();
    60+
    return;
    61+
    }
    62+
    63+
    meals.forEach(showMealInfo);
    64+
    } else {
    65+
    alert("Please try searching for meal :)");
    66+
    }
    67+
    };
    68+
    69+
    const form = document.querySelector("form");
    70+
    form.addEventListener("submit", searchMeal);
    71+
    72+
    const magnifier = document.querySelector(".magnifier");
    73+
    magnifier.addEventListener("click", searchMeal);

    ‎098. Meal Finder/index.html

    Lines changed: 49 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,49 @@
    1+
    <html lang="en">
    2+
    <head>
    3+
    <meta charset="UTF-8" />
    4+
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    5+
    <title>Meal Findertitle>
    6+
    <link rel="stylesheet" href="style.css" />
    7+
    <link
    8+
    rel="stylesheet"
    9+
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    10+
    integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
    11+
    crossorigin="anonymous"
    12+
    referrerpolicy="no-referrer"
    13+
    />
    14+
    head>
    15+
    <body>
    16+
    <nav>
    17+
    <form class="input-container">
    18+
    <input type="text" class="input" placeholder="Search ..." />
    19+
    <i class="fa-solid fa-magnifying-glass magnifier">i>
    20+
    form>
    21+
    22+
    <ul>
    23+
    <li>Breakfastli>
    24+
    <li>Launchli>
    25+
    <li>Dinnerli>
    26+
    ul>
    27+
    nav>
    28+
    29+
    <main>
    30+
    <div class="container">
    31+
    <div class="img">div>
    32+
    33+
    <div class="content-container">
    34+
    <h1 class="title">Food Nameh1>
    35+
    <p class="info">
    36+
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde
    37+
    nostrum consequatur, nulla explicabo vero nesciunt architecto
    38+
    officiis eius ullam alias.
    39+
    p>
    40+
    <button class="main-btn">$20 - Order Nowbutton>
    41+
    div>
    42+
    div>
    43+
    main>
    44+
    45+
    <section class="ingredients">section>
    46+
    47+
    <script src="app.js">script>
    48+
    body>
    49+
    html>

    ‎098. Meal Finder/style.css

    Lines changed: 121 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,121 @@
    1+
    * {
    2+
    box-sizing: border-box;
    3+
    }
    4+
    5+
    nav {
    6+
    display: flex;
    7+
    justify-content: space-around;
    8+
    align-items: center;
    9+
    margin: 20px;
    10+
    }
    11+
    12+
    .input-container {
    13+
    display: flex;
    14+
    align-items: center;
    15+
    border: 1px solid #ff6e00;
    16+
    padding: 5px;
    17+
    width: 300px;
    18+
    height: 50px;
    19+
    border-radius: 50px;
    20+
    margin: 10px;
    21+
    position: relative;
    22+
    transition: width 1.5s;
    23+
    }
    24+
    25+
    .input {
    26+
    margin: 10px 50px;
    27+
    margin-left: 20px;
    28+
    width: 100%;
    29+
    color: #ff6e00;
    30+
    border: none;
    31+
    background: transparent;
    32+
    outline: none;
    33+
    transition-delay: 0.5s;
    34+
    }
    35+
    36+
    .magnifier {
    37+
    position: absolute;
    38+
    right: 15px;
    39+
    width: 25px;
    40+
    text-align: center;
    41+
    margin: 0 auto;
    42+
    cursor: pointer;
    43+
    color: #ffa31a;
    44+
    }
    45+
    46+
    ul li {
    47+
    display: inline;
    48+
    margin-left: 40px;
    49+
    font-family: sans-serif;
    50+
    }
    51+
    52+
    main {
    53+
    display: flex;
    54+
    justify-content: center;
    55+
    align-items: center;
    56+
    }
    57+
    58+
    .container {
    59+
    width: 60%;
    60+
    padding: 3rem;
    61+
    box-shadow: 10px 10px 40px 5px #e0e0e0;
    62+
    margin-top: 5rem;
    63+
    display: flex;
    64+
    justify-content: space-between;
    65+
    align-items: center;
    66+
    }
    67+
    68+
    .content-container h1 {
    69+
    font-family: sans-serif;
    70+
    font-size: 2rem;
    71+
    color: #2c2c2c;
    72+
    }
    73+
    74+
    .content-container p {
    75+
    font-family: sans-serif;
    76+
    line-height: 1.4;
    77+
    margin-bottom: 2rem;
    78+
    color: #444444;
    79+
    width: 26rem;
    80+
    }
    81+
    82+
    .img {
    83+
    transform: translateX(-120px);
    84+
    margin-top: 1rem;
    85+
    width: 350px;
    86+
    height: 350px;
    87+
    border-radius: 300px;
    88+
    background: url("https://images.unsplash.com/photo-1600289031464-74d374b64991?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1075&q=80");
    89+
    background-repeat: no-repeat;
    90+
    background-position: center;
    91+
    background-size: conver;
    92+
    }
    93+
    94+
    .ingredients {
    95+
    width: 80%;
    96+
    margin: 0 auto;
    97+
    margin-top: 5rem;
    98+
    padding: 50px;
    99+
    }
    100+
    101+
    .ingredients span {
    102+
    display: flex;
    103+
    flex-wrap: wrap;
    104+
    list-style: none;
    105+
    }
    106+
    107+
    .ing {
    108+
    padding: 10px 20px;
    109+
    border: 2px solid #ff6e00;
    110+
    color: #ff6e00;
    111+
    font-family: sans-serif;
    112+
    border-radius: 100px;
    113+
    }
    114+
    115+
    .main-btn {
    116+
    background: transparent;
    117+
    border: none;
    118+
    border: 2px solid #ffa31a;
    119+
    padding: 10px;
    120+
    color: #ffa31a;
    121+
    }

    0 commit comments

    Comments
     (0)