Random Meal Generator

Photo by Natalia Yakovleva on Unsplash

Random Meal Generator

Padmashree Jha's photo
Padmashree Jha
·

3 min read

Table of contents

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

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.

Did you find this article valuable?

Support Padmashree Jha by becoming a sponsor. Any amount is appreciated!

HTML5CSSbootstrap 4JavaScriptjQuery