App that displays current weather in New England state capitols. View working component.
Project meets general accessibility (WACG) and cross-browser requirements. More testing with a dedicated services (e.g., Sauce Labs) would be helpful if deploying to production.
-
Several locations - with Metric units.
-
Several locations - with Imperial units.
This is a static component. Simply open the index.html file in your browser. However, component uses ES6 modules. Developing locally may require disabling your browser's local file restrictions.
My goal was to build an app that pulls data from the National Weather Service (NWS) and displays current weather in the six New England state capitols. I wanted to offer users both Imperial (Fahrenheit, miles) and Metric (Celsius, kilometers) units and have the app remember a user's choice for return visits. The NWS uses Metric units. I did the miles/km and F/C conversions in the app. The math isn't that complex. I also used the browser's local storage to remember a user's preferred unit.
Deciphering the NWS's API took some time. Also, ensuring the six cities displayed in the same order each time data was fetched required some planning. Since the six separate calls to the NWS use Promises and Promises are asynchronous, the order in which results were returned varied. To overcome this, I built the elements for the page first, and then matched the data to the elements.
- Weather data from National Weather Service.
- Readme guidance from Brenna Martenson.
- Linting guidance from ESLint and Stylelint.
- Design guidance from Google's Material Design and Adobe Color.
- Shields from Shields.