Drink Deck

Search for a drink and flip through a carousel of options!
View Demo

Table of Contents

1. About The Project
   • Built With
2. Usage
3. Optimizations
4. Lessons Learned
5. Contact
6. Acknowledgments

About The Project

Ever wanted to know that recipe for a certain drink?

With this app, you can search for a drink by name (or partial name) and view all the options via a carousel of options.

(back to top)

Built With

• 
• 
• 

(back to top)

Usage

Type the name, or partial name, of a drink for which you need the recipe and either type the Enter key or click the Show Drink Options button to display the drink options.

• If only one drink is found, the carousel controls will not display.
• If multiple recipes are found for that drink, the carousel controls will be displayed, and you can pause, restart, or use the arrow keys to skip ahead or go back within the carousel.

(back to top)

Optimizations

This project can be improved by:

• Refactoring the code to account for errors fetching data,
• Displaying the carousel items that are before and after the current drink to more clearly show the user that multiple drinks were returned,
• Improving the playing of the carousel to better handle when users search for drinks more than once.

(back to top)

Lessons Learned

• API Integration. When getting the data from TheCocktailDB, I learned how to use fetch to get JSON data from an external source.
• Data Manipulation. Once I had the data from TheCocktailDB's API, I learned how to transform that data into a format I needed for the project.
• Advanced Interactivity. Building a carousel was much more intense than I originally thought it would be!

(back to top)

Contact

Danielle Andrews - @DrAcula_codes - daniellerandrews - [email protected]

Project Link: https://github.com/DrAcula27/drinkDeck

(back to top)

Acknowledgments

A special thanks to these resources used in the project!

• TheCocktailDB
• GitHub Pages
• Font Awesome

(back to top)