It’s important to know what Mother Nature is going to throw at you each day – what if you wear flip flops because it’s sunny and 65 degrees in the morning and then it snows all afternoon (this is Colorado, after all).
As web developers you’re going to be living in the context of the web. With this next project you will be interacting with a web-api. Ultimately this is going to be a preview for what the real world is going to look like for most of you. Data is important and thats what the API provides. As a web-developer you will be giving value to that data by visualizing and organizing that data for your user base.
In this project you will be getting your first real interactions with ReactJS, asynchronous javascript, and managing the state of your application.
ReactJS fetch for api requests weather underground API
Create your Current Weather component
You will create your User Interface using mock data. This will speed up your development time by not waiting for api requests.
Your Current Weather component should display the following information
the name of the current city the current condition the current day the current temperature the expected high and expected low for the day a summary of what the weather is going to be like that day (“Windy, chance of a few late night showers. Lows overnight in the mid 50s.)
The application should have a 7 hour weather forecast component. Each hour should be a card component and should display the hour an image that reflects the weather the projected temperature Application should handle when a user searches for a location that is not found by the API. Team should research different ways to handle unfound locations by looking around on different weather and other location searching applications and implement a solution for their project that they find intuitive.
The application should have a 10 day forecast component. Each day should be a card component and should display the name of the day an image that reflects the weather the projected high and low temperature
Your application should have a welcome page that greets the user. The welcome page has a search component. The search component consists of an input field and a submit button that allows the user to search for a location (the location should work with both a zip code and city/state).
Once the desired location is submitted there should be a way for the user to change location information. Once the location information is changed the weather should reflect the desired location.
location persists after refresh.
Add autocomplete functionality to your search input import your completeMe into your Weathrly project. Populate it with this list of city/states. When a user starts typing in a city/state or zip code display a list of possible suggestions using your completeMe’s suggest function.
In our design we tried to keep a simple and inuitive layout. We used blue as a main color for weathrly because it's a calm relaxing color
