Happy Hour Guide

The creation of the Happy Hour Guide was my first introduction to working with APIs. This offered an opportunity to expand my knowledge in web development, design, and styling beyond where I was before this. Through the combined use of HTML, CSS, and vanilla JavaScript, I aimed to provide individuals with a fun and informative resource for discovering exciting drink recipes to enjoy.

I. Getting started

Prerequisites

Other than an internet browser and IDE, there are no other requirements to run this application.

Installation

How to install and run the application.

Clone the repository from GitHub.

git clone https://github.com/LadyBluenotes/TheHappyHourGuide

Start the application

open index.html

II. About

Built with

The foundation of the Happy Hour Guide is in the fundamental web development principles. To ensure a good understanding of the core concepts, I utilized HTML, CSS, and vanilla JavaScript as the primary languages. Instead of relying on frameworks and libraries, I chose to focus on crafting a unique and custom styling and structure from scratch.

For data integration, I seamlessly incorporated TheCocktailDB API into the application. This API proved to be an excellent choice due to its user-friendly nature and availability at no cost. It provided a seamless introduction to working with APIs, offering a smooth learning experience without the complexities associated with more advanced API implementations.

III. Motivation

After spending time building my confidence with HTML and CSS, I felt ready to incorporate JavaScript into my skill set. However, I didn't want to simply create a more interactive project; I saw it as an opportunity to delve into the world of APIs and learn how to integrate them into my work.

While I had been exposed to more complex APIs in the past, I intentionally sought out a simpler one for this project. The TheCocktailDB API supplied this by not only did it offering well-structured data, but it also proved to be incredibly user-friendly and, best of all, free to use. Choosing this API allowed me to focus on the integration process and API fundamentals.

In terms of project styling, I aimed to create a visually striking and functional experience. I decided to implement a pop-up or modal feature that would appear when users sought out a specific drink or when they selected a random one. This choice challenged me to leverage my skills in CSS and JavaScript, ensuring that the final result was both aesthetically pleasing and highly functional.

IV. Key takeaways

Discoveries and reflections

This project provided me with several valuable discoveries and reflections:

Embracing creative problem-solving: The design challenges encountered in this project highlighted the importance of creative problem-solving. Developing a custom project design from scratch, incorporating a modal feature, and ensuring responsiveness required adaptability and innovative thinking.
Growth through challenges: Overcoming the difficulties faced during this project emphasized the importance of perseverance and a growth mindset. I looked at is as an opportunity to tackle challenges head-on, fostering my problem-solving abilities and expanding my knowledge in web development.

Technical growth

API integration and data handling

Integrating the API presented challenges due to the structure of the returned data object. I had to navigate through the object and learn how to extract the wanted information using loops and conditionals. Additionally, I had to devise strategies to handle cases where certain keys in the data object did not have corresponding values.

Exploring JavaScript

Working on this project provided an enjoyable learning experience with JavaScript. I discovered the power of event listeners and their role in creating interactive user experiences. The project introduced me to utilizing the native fetch API for making API calls, opening doors to data retrieval. I embraced the console as a valuable tool to inspect the returned data and determine the necessary steps to access and use the required information. Once the desired data was obtained, I tackled the task of dynamically rendering it into the DOM.

Design challenges

The design aspect of the project presented its own set of challenges. I aimed to create a project with a custom design, starting with a written mock-up to outline the desired visual appearance and user experience. One of the design goals was to incorporate a modal feature, which was a new concept for me. Ensuring the modal's responsiveness and seamless integration with the overall design proved to be the most challenging aspect of the project, contrary to my initial expectations.

V. Acknowledgements

With this being my first modal attempt, I followed a tutorial from Brad Traversy of the Traversy Media Youtube channel (opens in a new tab) to help me get started.

VI. Additional Information

Known Issues

Can be found here (opens in a new tab).

Feature Improvements

Allow users to save the drinks they like.

My Portfolio Welcome to Space