Coctails Project

Welcome to the Coctails project! This web application allows users to search for cocktails, view their ingredients and instructions, and save their favorite cocktails and ingredients. The project was developed using HTML, SASS, JavaScript, REST API, AJAX, and Parcel as a build tool.

LivePages: https://ggalina.github.io/Cocktails/

Getting Started

To run the project on your local machine, follow these steps:

1. Clone the Repository:

   git clone https://github.com/GGalina/Cocktails.git
   

2. Navigate to the Project Directory:

   cd Coctails
   

3. Install Dependencies: Make sure you have Node.js and npm installed.

   npm install
   

4. Start the Development Server: To start the project, run the following command:

   npm start
   

Features

Cocktail Search: Users can search for cocktails by name or ingredients.

Cocktail Details: Clicking on a "Learn more" button will display detailed information, including ingredients and instructions for preparation.

Favorite Cocktails: Users can mark cocktails as favorites, which will be saved in the "Favorite Cocktails" tab for easy access.

Favorite Ingredients: Similar to cocktails, users can also save their favorite ingredients for future reference.

Technologies Used

HTML: Used for structuring the web pages.

SASS: Used for styling the user interface.

JavaScript: Implemented the application's logic, including handling user interactions and making AJAX requests to the REST API.

REST API: Used to fetch cocktail and ingredient data.

AJAX: Utilized to make asynchronous requests to the API.

Parcel: Used as a build tool to bundle and compile the project.

Project Structure

index.html: The main HTML file for the application.

src/: This directory contains the source code for the project, including JavaScript, SASS, and other assets.

src/js/: JavaScript files for application logic.

src/scss/: SASS files for styling the user interface.

src/partials/: HTML partials of the project.

dist/: This directory contains the compiled and bundled project for deployment.

Usage

Search for Cocktails: Enter a cocktail name in the search bar to find your favorite cocktails.

View Cocktail Details: Click on "Learn More" button to see detailed information, including ingredients and preparation instructions.

Save Favorites: Click the heart icon to save a cocktail or ingredient as a favorite.

View Favorites: Click the "Favorite Cocktails" or "Favorite Ingredients" tab to see your saved favorites.

Developers Team

Developers: Dmitriy Vorotnoy, Bogdan Pysar, Halyna Hryn, Illia Zolotukha, Vladyslav Harkusha, Ihor C., Voronina Nataliia.

Team Lead: Dmitriy Vorotnoy