Loading repository data…
bocaletto-luca / repository
Cocktail-Explorer
Cocktail Explorer is an interactive web application designed to help you discover and explore a wide variety of cocktails using a free API. This project dynamically fetches cocktail data—including images, names, descriptions, and preparation instructions—and presents the information through a sleek and responsive interface built with HTML, CSS, Jav
#api#api-free#bocaletto-luca#cocktails#cocktails-api#css3
Live repository statistics
★ 8Stars
⑂ 1Forks
◯ 0Open issues
◉ 8Watchers
README preview
Cocktail Explorer | API FREE | Database | WEBAPP
Author: Bocaletto Luca
Cocktail Explorer is an interactive web application designed to help you discover and explore a wide variety of cocktails using a free API. This project dynamically fetches cocktail data—including images, names, descriptions, and preparation instructions—and presents the information through a sleek and responsive interface built with HTML, CSS, JavaScript, and Bootstrap 5.
Features
- Responsive Design: Enjoy a seamless browsing experience across desktops, tablets, and mobile devices.
- Free API Integration: Retrieve cocktail data from a free public API (such as TheCocktailDB).
- Visual Appeal: Displays high-quality images of each cocktail alongside its name.
- Detailed Information: View comprehensive cocktail details including descriptions and preparation methods.
- Dynamic Modal Display: Click on any cocktail card to open a modal window with further details about the selected cocktail.
- Pagination & Filtering: Navigate through multiple pages of cocktails and easily filter or search for your favorite drinks.
Technologies Used
- HTML5
- CSS3
- JavaScript
- Bootstrap 5
Getting Started
Prerequisites
Cocktail Explorer runs directly in any modern web browser without additional dependencies. For development, it is recommended to use an editor with live preview functionality (like Visual Studio Code with the Live Server extension).
Installation
-
Clone the Repository git clone https://github.com/bocaletto-luca/Cocktail-Explorer.git cd cocktail-explorer
-
Launch the Application
- Open the
index.htmlfile in your preferred web browser. - Alternatively, use a live-reload server via your code editor to see changes in real time.
How It Works
- Data Fetching: Utilizes JavaScript’s Fetch API to request cocktail data from a free API such as TheCocktailDB. The application processes the JSON response and dynamically creates cocktail cards.
- Dynamic Display: Each card features a cocktail image, its name, and a brief description. Clicking on a card opens a modal with detailed preparation instructions and additional information.
- Filtering & Pagination: Users can search or filter cocktails, and the application divides large datasets into manageable pages for easy navigation.
Contributing
Contributions are very welcome! If you’d like to improve the project or add new features, please follow these steps:
- Fork the repository.
- Create a new branch for your feature or fix:
- Open a Pull Request against the main branch of the original repository.
License
This project is licensed under the GNU General Public License v3.0 (GPLv3). See the LICENSE file for more details.
Contact
For questions, suggestions, or feedback, please open an issue in this repository or contact the maintainer via GitHub.