Meal Finder using MealDB API

 

Course from Brad Traversy

Features:

fetching API with fetch()

manipulating DOM in js 

Github code

HTML

The input box includes a button to submit a search, and another one is the random search button. Both of them will trigger addEventlistener.

The result heading shows the result message.

The meals show the result displaying of cards.

The single meal shows the details of picked meal.

CSS

   The container is centered, and the form is flex.

The meals is a list of results, which distributed to four items each line.

The each meal with info is in the absolute position covered on the images.

Changing the opacity of meal info's background by hovering each meal.

The responsive purpose.

JS

get the DOMs needed

search and random click trigger the functions

reset the single meal first and then fetch the meals data from the MealDB API

AND result heading shows the meal according to the searching name

If no meal in the database, show the message

map all the meals if have and then create the meal

If the input is null, the message in the result heading

When clicking the random button, fetch the database again to pick the random meal and show on the page.

loop the meals to find the meal-info and get the attribute of meal id number

select the meal picked and add the meal to DOM