In this blog we will build a Random Meal Generator using TheMealDB. The resources that we will use: -

Bootstrap 4 for styling
JavaScript for adding logic
jQuery For making writing code easier
popperJS As a dependency for Bootstrap

So now without wasting time let's start 🚀

HTML

Boilerplate

So first add the boilerplate

<!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>

Add External Libraries

Bootstrap CSS

Add the link tag below into the head tag

<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 and jQuery

Add these three script tags at the end of the body tag

<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"/>

Add custom styles and script

Add this link tag and script somwhere

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

Add other structure

Add the code in the body tag

<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>

Now the HTML part is ended

CSS

Default styling

Add these styling in 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;
}

Hover for button and customization

First add customization

Customization

Add this in 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;
}

Add hover effect

This will add hover effect to the button.

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

Dark theme

Now as we people are coders we need a dark theme.

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }

  body {
    color: white;
    background: black;
  }
}

Now we are done with CSS.

JavaScript

Now starts the interesting part. Add the code in 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>
            `);
    };

});

Here is the end and now you can add yourself as a professional chef in your portfolio. Comment if you want to add Web3 and solidity into it in the next post.

Random Meal Generator

Table of contents