A single page Weather Forecast web application. Check out the project here!
This project was built with HTML/CSS, Bootstrap, and Vanilla JavaScript. This project uses OpenWeather APIs to get current weather and forecast information.
- Display current date and time (of the user)
- Display location (Montreal, Canada by default)
- Allow users to display a specific city's weather information, via:
- Search engine (user can search for any city) OR
- The user's current location
- Display the current temperature, weather description (i.e. Sunny, Clouds, Clear, etc.), wind speed
- Display icons to match the weather
- Forecast information (Next 5 Days)
- More weather information, such as Min/Max Temperature, time of sunset and sunrise, humidity, etc.
- Five possible backgrounds, chosen based on time of day and weather condition:
- Day time [clear sky]
- Day time [all other weather conditions, i.e. cloudy, rainy, snowy, etc.]
- Sunset (+/- 30 mins from time of today's sunset) [any weather condition]
- Sunrise (+/- 30 mins from time of today's sunrise) [any weather condition]
- Night [any weather condition]
- Search engine error handling:
- When a user submits an empty string
- When a user submits a non-existent city
- Display timezone
- Add more possible backgrounds for various weather conditions
- Implement responsiveness (make mobile-friendly)
- Use local storage to cache API calls
- Unit conversion (change between Celsius and Fahrenheit)
- Add more forecast information, such as Next 5 Hours
- Improve web performance (how long the site, data, and images load)
- Improve code readability (comments, using more descriptive class/id/variable names)
The 3D weather icons used were found on UI Freebies. The following icons were made using the UI freebies material:
- 04d.png
- 04n.png
The default icons that come with the Open Weather API can be found here
