Weather App

This project was built as part of The Odin Project: JavaScript course in order to practice what I've learned about asynchronous JavaScript, including Promises, async/await, and working with APIs.

Understanding the Problem

Create a weather application with a user interface. The user should be able to search for a specific location, view the weather, and toggle the data to display in Fahrenheit or Celsius.

The look of the page should change based on the data - perhaps by changing the background color or by adding images that describe the weather.

Plan

1. Project startup:

   1. Initialize my project to create a package.json file
   2. Install webpack
   3. Set up my directories according to convention
   4. Set up an HTML doc with appropriate links to CSS and JS

2. Write functions that hit the API. They should take a location and return weather data for that location. To start, simply console.log() the information.

3. Write functions that process the JSON data I will receive from the API and return an object with only the data that I require for the app

   • current data:
     • chanceOfRain
     • cloud
     • condition
     • feelsLikeC
     • feelsLikeF
     • humidity
     • isDay
     • lastUpdated
     • location
     • moonPhase,
     • sunrise,
     • sunset,
     • tempC
     • tempF
     • uv
     • windDegree
     • windKph
     • windMph
   • daily forecast data:
     • condition
     • date
     • maxTempC
     • maxTempF
     • minTempC
     • minTempF

4. Set up a simple form that enables the user to input their location. The app should then fetch the weather info based on the input location (still simply console.log() the info).

5. Display the information on the webpage

6. Add styling

7. Optional: Add a 'loading' component that displays from the time the form is submitted until the info comes back from the API. (Use DevTools to test for low-end devices.)

Credits

Powered by WeatherAPI.com

Icons by Erik Flowers