This is my second project completed for Eleven Fifty Academy Coding Bootcamp. The goal of this project was to familiarize myself with implementing api fetches using Javascript.
- Vanilla Javascript
- CSS
- HTML
- Bootstrap v5.0
- Figma
- Coolers (color pallet designer)
- IQ Air API (https://www.iqair.com/us/air-pollution-data-api)
Used to fetch data from US weather stations and populate the weather widget. - Google Cloud Platform, Places API
Used To fetch photographs from US Cities.
This project uses data and images from 2 APIs to dynamically generate cards with information on pollution and weather data from U.S. cities. I designed the layout and color scheme in Figma. Bootstrap enabled me efficiently implement a responsive layout, while using a custom CSS Style to implement my original design from Figma.
- Bootstrap is effective at quickly creating a responsive framework, however when used for dynamic dom element creation in JS, the Bootstrap classes can make the dom element creation hard to parse for the human eye.
- Sometimes the 'small adjustments' at the end take longer than expected.
- It would possibly be better to re-design the app so selected city and selected state are not global variables.
- Split some functions into smaller sub functions.
- Figure out if it possible to transform the photo url fetch into a promise. The Google Places api service syntax was unfamiliar to me, so I was unable to return the necessary data as a promise.