This Web Application helps visitor pick a drink during any occassion
Link to project: https://thecocktailbar.netlify.app/
Tech used: HTML, CSS, JavaScript, Cocktail API
This project was built using HTML as the base structure with CSS for the styling. Postman (https://www.postman.com/) was used to test the Cocktail API before it was implemented with the JavaScript. Based on the data obtained from the API, DOM manipulation was carried out to change and display data obtained within the DOM.
The app provides a form to input the desired drink and search for that drink. The results are then displayed within the DOM using a carousel format.
The carousel format used is obtained and implemented using the Swiper.js plugin
Within the fetch section in the JS, the body background was set to change on every response to the request to get an APOD to match the picture of the day.
To further improve this app, there isn't any ingredients currently listed as part of the information displayed, so the app can be updated to display the ingredients for each cocktail/drink. This will assist visitor to be able to make their own drinks from the comfort of their home provided that they have the ingredients.
When I originally completed this project, I proposed to optimize it by using standard practice to populate the DOM instead of using innerHTML. With this new version, I have successfully fulfilled those conditons and the code is now refactored and optimized without using innerHTML.
This project helped me learn how to implement plugins like Swiper.js to suit the requirements for the project. It also helped me improve in reading and understanding documentation properly to be able to use tools effectively.
While building the Web Application, I made use of 'innerHTML' to populate the slider during DOM Manipulation. I understand that this isn't the best practice but I used this project to learn about using the innerHTML feature and I can confidently say that I understand it.
This current version has successfully eliminated the use of innerHTML to populate the slider during DOM Manipulation. The code looks better and more understandable and currently, I prefer using this current method of creating a new element and appending to a parent element to carry out DOM Manipulation.
Take a look at a few other projects that I have in my own portfolio:
Edie Agency: https://github.com/daniel-ezekiel/edie-agency-website
SPC APOD: https://github.com/Daniel-Ezekiel/sc-apod
The Creative Crew: https://github.com/daniel-ezekiel/team-page-challenge