Daily Forecast

Website: aexcode-daily-forecast.netlify.app
Author: aexcode

Description:

Daily forecast is a basic weather app that allows a user to get the current and upcoming forecast for any location in the world. The app features a set of hand-crafted, pure CSS weather icons that have been mapped to the OpenWeatherMap API as well as an option to switch from Celsius to Fahrenheit or vice versa, on the fly.

Tech:

• React
• React Hooks
• React Context
• SASS
• OpenWeatherMap API
• Pure CSS Weather Icons

Features:

• Users can search by location to get the current and upcoming weather forecast in that region.
• Users can switch between Celsius and Fahrenheit and see the change in real time
• If temperature units preference has not been set, the location of the first search will determine the units displayed. Locations in the USA will default to Fahrenheit, units outside the USA will default to Celsius.
• Once units have been set ether by the user or the first searched location, they will persist until changed by the user.
• Mobile Responsive. Check it out on Responsinator
  
  

View all the App Screenshots on Imgur

Future Updates:

• Additional error handling for invalid locations

About the Weather Icons:

I began learning how to create Pure CSS art at the beginning of January 2021. In an effort to continue practicing, I decided to create a set of pure CSS weather images. I mapped them to the OpenWeatherMap API, knowing I would later want to put them to use.

However, this app is just for fun! It's a mash of the material I'm currently learning and the material I've chosen to practice. If building an app for production, it would make more sense to create these same icons with SVG.

View My Pure CSS Weather Icon Collection on Codepen