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 the picked meal.

CSS

The container is centered, and the form is flex.

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

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.