A simple landing page that allows to show the weather and fetch a random cocktail name and image. Done as part of BrainStation Web API hackaton over 4h as a team of 4 people.

Credits

• Thanks to Lucas Deng for implementing the HTML5 and using DOM API to integrate the two web APIs output.
• Thanks to Yuxin Zeng for implementing the weather API https://openweathermap.org/api
• Thanks to Grace Lau for implementing the look and feel using SAAS and CSS3
• As for I, I implemented the cocktail API https://www.thecocktaildb.com/api.php

How to use

1. Navigate to the page at https://nicmart-dev.github.io/weather-mix/

2. Search for city to display its weather, and then click to show a random cocktail whose name will reflect some elements of said weather:

Behind the scenes

• Planned the work using Trello board: https://trello.com/b/lG8Y99Ib/web-api-hackathon
• Did a UI mockup collaboratively using https://excalidraw.com/#room=7a2d982dfb40189d705f,fAceWqTejbd0Rg601qPcxA

What we'll do better next time

• Using GitHub pull requests to better manage coding collaboratively, instead of manual merging on shared Google Drive

Original requirements

For this hackathon event, your Education Team will divide the class into groups. Your job is to build a front-end web application that fulfills the following requirements:

• Use HTML5, CSS3, Flexbox & Sass for structuring and building the UI
• Use appropriate BEM naming convention
• Use DOM APIs for adding/deleting/updating the elements on your page
• Use the fundamentals of programming in Javascript to write your logic. This would entail usage of variables, control flow statements, functions, loops & DOM APIs
• Demonstrate implementation of asynchronous programming concepts like promises, callbacks, event handlers
• Pick an API for your project and apply your asynchronous programming skills to call the required API in your project