В этом блоге мы создадим генератор случайных блюд, используя TheMealDB. Ресурсы, которые мы будем использовать: -

  • Bootstrap 4 для стилизации
  • JavaScript для добавления логики
  • jQuery для облегчения написания кода
  • popperJS как зависимость для Bootstrap

А теперь, не теряя времени, приступим 🚀

HTML

Шаблон

Итак, сначала добавьте шаблон

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Random Meal Generator</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="description" content="" />
  </head>
  <body>
</body>
</html>

Добавить внешние библиотеки

Начальный CSS

Добавьте тег ссылки ниже в тег заголовка

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Bootstrap JS, Popper JS и jQuery

Добавьте эти три тега скрипта в конец тега body.

<script 
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 
        crossorigin="anonymous"
 />
<script 
        src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"/>
<script 
        src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"/>

Добавить пользовательские стили и скрипт

Добавьте этот тег ссылки и скрипт где-нибудь

<script src="js/app.js"></script>
<link rel="stylesheet" href="css/styles.css">

Добавить другую структуру

Добавьте код в тег body

<div class="container center">
<div class="row h-100 justify-content-center align-items-center">
        <div class="container text-center">
<h1 class="mt-4" id="hello">Hello! </h1>
            <h2 class="h3" id="statement">Feeling hungry but don't know what to eat? </h2>
            <p class="h6">Click the button bellow and get random recipe! </p>
            <button class="btn btn-info mt-2 mb-4 myButton">Get a meal! </button>
<div class="recipe container" id="recipe">
</div>
</div>
    </div>
</div>

Теперь часть HTML закончена

CSS

Стиль по умолчанию

Добавьте эти стили в css/style.css

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
.center {
  height: 100vh;
}
.list-item {
  padding: 0;
  padding-left: 5px;
  font-size: 14px;
}
.list-item:last-of-type {
  margin-bottom: 20px;
}
.mealThumb {
  height: 420px;
}

Наведение для кнопки и настройки

Сначала добавьте настройки

Настройка

Добавьте это в css/styles.css

.myButton {
  margin-top: 30px !important;
  -webkit-transition: -webkit-transform 0.5s, -webkit-box-shadow 0.5s;
  transition: -webkit-transform 0.5s, -webkit-box-shadow 0.5s;
  transition: transform 0.5s, box-shadow 0.5s;
  transition: transform 0.5s, box-shadow 0.5s, -webkit-transform 0.5s, -webkit-box-shadow 0.5s;
}

Добавить эффект наведения

Это добавит эффект наведения на кнопку.

.myButton:hover {
  -webkit-transform: translateY(-12px);
  transform: translateY(-12px);
  -webkit-box-shadow: 0px 3px 8px 2px #0f6875;
  box-shadow: 0px 3px 8px 2px #0f6875;
}

Темная тема

Теперь, когда мы кодеры, нам нужна темная тема.

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
body {
    color: white;
    background: black;
  }
}

Теперь мы закончили с CSS.

JavaScript

Теперь начинается интересная часть. Добавьте код в js/app.js

$(function () {
const button = $('.btn');
    const receipeContainer = $('#receipe');
button.on('click', function () {
        // receipeContainer.text('test');
        $("#receipe").html('<div class="spinner-border" role="status">\n<span class= "sr-only" > Loading...</span>\n</div> ')
        $.ajax({
            url: "https://www.themealdb.com/api/json/v1/1/random.php",
            method: "GET",
            dataType: "json",
        }).done((res) => {
            // console.log(JSON.stringify(res));
            createMeal(res.meals[0]);
            $('#hello').html("");
            $("#statement").html("Did not like the food below.");
        })
})
function createMeal(res) {
const ingredients = [];
// Get all ingredients from the object. Up to 20
        for (let i = 1; i <= 20; i++) {
            if (res[`strIngredient${i}`]) {
                ingredients.push(
                    `${res[`strIngredient${i}`]} - ${res[`strMeasure${i}`]}`
                );
            } else {
                break;
            }
        }
receipeContainer.html(`
                            <div class="row border mb-4">
<div class="col-lg-6">
                                    <div class="row">
                                        <div class="col-lg-12 my-4 ">
                                            <img class="w-100 mealThumb" src="${res.strMealThumb}" alt="">
                                        </div>
<div class="col-lg-8">
                                            <h3 class="mt-2">Ingrediens:</h3>
                                            <ul class="list-group list-group-flush">
                                                ${ingredients.map(ingredient => `<li class="text-lg-left list-item ml-3">${ingredient}</li>`).join('')}
                                            </ul>
                                        </div>
                                        <div class="col-lg-4 ">
                                            <h3 class="text-center mt-2">Category:</h3>
                                            <p>${res.strCategory}</p>
                                            <h3 class="text-center">Area:</h3>
                                            <p> ${res.strArea}</p>
                                            ${res.strTags === null ? '' : `<h3 class="text-center">Tags:</h3>
                                            <p>${res.strTags.split(',').join(', ')}</p>`}
                                        </div>  
                                    </div>
                                </div>
                                <div class="col-lg-6">
<h3 class="h1 mt-3">${res.strMeal}</h3>
<div class="col-lg-12 pt-3">
                                        <p class="text-justify">${res.strInstructions}</p>
                                    </div>
<iframe class="my-3" width="100%" height="315"
                                    src="https://www.youtube.com/embed/${res.strYoutube.slice(-11)}"
                                    frameborder="0">
                                    </iframe>
</div>
                            </div>
            `);
    };
});

Вот и конец, и теперь вы можете добавить себя в качестве professional chef в свое портфолио. Комментарий, если вы хотите добавить Web3 и надежность в следующем посте.