People Always Talk About The Weather...
They are also always checking the weather in native and web applications.
Now you can go further and create your own web based Weather application!
- Create a GET requests
- Getting data from an open API
- Working with JSON files
-
Create a simple input field with an autocomplete feature (when the user starts typing, after 3 characters a list of cities appear which matches that search). Create a card that shows the weather data (temperature, sky conditions, humidity, etc.) of the selected city. Searching and selecting a new city should update the card.
- When we open up the page, there is a simple input field with an autocomplete feature that shows search matches after 3 characters
- When we search and select a city, the weather of this city is showing up
- A way to access and view the forecast for the next five days.
-
Do some improvements in order to make the web application more interesting.
- There is a button to put a city into the favourites, which list shows up when the input field is selected and the input is empty (the favourite list data doesn't need to persist after a reload, but the LocalStorge API could be used to persist the list)
- Weather panel is showing a fetch api spinner while the content is loading Sample loading fetch API spinner on Codepen.
- Assign a nice background image to the chosen city that fits nicely to the site and apply it on the background. You can create object which store city name and image url. You can also
- You can use Pexels API to get image for chosen city dynamically. Read the official Pexels API Documentation.
- Generate a free API key from in order to access the Pexels API.
- Use presented endpoint to get image for chosen city e.g. for Bucharest: https://api.pexels.com/v1/search?query=Bucharest
- There is a
<div id="root">tag without children when the page loads in - All the contents are placed and removed by javascript
- There are multiple APIs you can use for weather:
- WeatherApi.
- OpenWeatherMap
- OpenMeteo
- And many other more, just search for "free weather API"
- For searching for citites try to find an API that exposes a list of cities.
- For students that want to play around with frameworks, this project can also be implemented using a frontend framework like React or Vue.