Drinksearch is a user-friendly bar app that allows customers to scan barcodes and access a virtual drinks menu. With an iOS-inspired design, it provides information of up to 100 drinks, including ingredients and instructions.
Functionality
–Customers can scan a barcode to access the app. –Users can choose from a virtual drinks menu consisting of up to 100 drinks. –The app provides information about the ingredients used in each drink. –Users can also view the instructions on how to make each drink.
Design
–The app features an iOS-inspired design –The design incorporates a glass-like element above a blurred background, resembling the iOS Notification Center. –The app is fully responsive and was designed using Figma.
Objective
–The objective of this project was to utilize an extensive database of drink information. –An API was used to fetch the data and append specific information to the DOM. –The goal was to create a simple and user-friendly web app. –The entire app was developed on a single HTML file with a minimal UI.
Technologies Used
–The project was coded using vanilla HTML, CSS, and JavaScript. –No frameworks or libraries were used.
Project Overview
–The project started with a predefined design concept, and the implementation of functionality followed. –The navigation bar includes multiple search options, such as a dynamic search bar, A-Z search, spirit-based search, and a random drink selection. –Upon obtaining a search value, the app dynamically appends a list of informational cards to the DOM using JavaScript and HTML templates. –CSS z-index property was extensively used to display the newly created cards above the hero section. –A modal was implemented to provide additional information when a user clicks on a card.
Issues Faced
–Some issues were encountered with the API integration. –To access drink information, a search was needed using a specific ID as a parameter. –CSS-related challenges included managing overlapping elements and ensuring proper floating behavior. –JavaScript was utilized to handle closing the mobile soft keyboard on scroll and to set a timeout for the dynamic search functionality.