В этом блоге мы создадим генератор случайных блюд, используя 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 и надежность в следующем посте.