Weather app, view live
Assignment made for The Odin Project curriculum, with this project users can search for global weather data and we put into practice promises, async/await, fetch and in general how to make use of an API!
I even learned how to make use of the Geolocation API in conjunction with localStorage.
- How to make use of an API.
- Make a better use of Promises.
- Better understanding of async/await
- Error handling with promises.
- How to import multiple files with webpack.
- Deal with custom dropdowns.
- To use 'high order functions' and why they can be amazing!
- How to use the Geolocation API
- Set up a blank HTML document with the appropriate links to your JavaScript and CSS files.
- Write the functions that hit the API. You’re going to want functions that can take a location and return the weather data for that location. For now, just console.log() the information.
- Write the functions that process the JSON data you’re getting from the API and return an object with only the data you require for your app.
- Set up a simple form that will let users input their location and will fetch the weather info (still just console.log() it).
- Display the information on your webpage!
- Add any styling you like!
- Optional: add a ‘loading’ component that displays from the time the form is submitted until the information comes back from the API.
Check the original page of the specifications here.
- 01n.png photo by Ivana Cajina on Unsplash
- 02n.png photo by Angga Pratama on Unsplash
- 03d.png photo by joanna090 on Pixabay
- 03n.png photo by Herrmann Stamm on Unsplash
- 04d.png photo by Zbynek Burival on Unsplash
- 04n.png photo by Andriyko Podilnyk on Unsplash
- 10d.png photo by Vita Leonis on Unsplash
- 11d.png photo by Layne Lawson on Unsplash
- 11n.png photo by Breno Machado on Unsplash
- 13d.png photo by Tom Coomer on Unsplash
- 50n.png photo by Jericho Cervantes on Unsplash