A web app that displays data and information about cocktails and how they are mixed. Information is acquired from TheCocktailDB.
The responsive application shows a list of cocktail names in a grid. Each cocktail has a button which opens a modal with an image of the cocktail, what ingredients are needed and how it is prepared. The cocktails can be searched by name.
The objective of this project was to get acquainted with vanilla JavaScript, get experience in integrating an external API and implementing Bootstrap.
- loads data from an external API: TheCocktailDB
- view a list of cocktails
- on button click: Modal opens and user can view more details on the cocktail selected: ingredients, type of glass, instructions for preparation
- search box: filters the cocktail list and displays only the cocktails with the name searched for
- HTML5
- CSS3
- JavaScript
- jQuery
- Bootstrap 4.2.1