- Using the APIs provided by Open Weather, I built a weather dashboard that runs in the browser and features dynamically updated HTML and CSS powered by JavaScript.
- When the user search for a city, the following information are generated on the webpage for the current day and 5 following days: date, temperature, humidity level, wind speed and icon illustrating the weather conditions.
- The weather for the current and the next five days is displayed based on the geolocation of the city provided by the user in the input field.
- The app uses the power of local storage which makes it even moreuser-friendly : the user is able to see the history of their last 6 searches and retrieve data for the last 6 cities searched only by clcking on a button (without having to use the form input again)
The following image shows the web application's appearance and functionality:
You can visit the webpage here
As a user,
I WANT to use the app,
SO THAT I can see the weather in the city of my choice
GIVEN the weather dashboard application
WHEN I input a city name and click on the search button,
THEN I can see the current weather and the weather for the next 5 days in that city
WHEN I come back to the webpage,
THEN I can see the last 6 cities that I've looked up
It's done when:
- The form can be submitted using the enter key or submit button
- After pressing the search button, the user can see additional content generated based on the inputted city name
- If the input is empty or contains special characters, it will be considered invalid
- If the input provided is not part of the 220000+ cities recognized by the API, it will be handled as an invalid city name
- When the form is submitted, two sections are generated on the webpage: a section for the current day and another section for the next 5 days.
- For each city, a new button is generated so that the user can retrieve weather info for that city by clicking directly on the button (without having to type the name of the city again)
- For each day, we can see the date - temperature - humidity level - wind speed and icon illustrating the weather condition.
- HTML, CSS & Bootstrap Framework
- JavaScript and jQuery Library
- Open Weather Geocoding API to convert city names to geo coordinates needed for the second API
- Open Weather Current Weather API to access current weather data for any location on Earth including over 200,000 cities
- Open Weather 5 Day Weather Forecast API (including weather forecast data with 3-hour step)
- Regex101, free multilingual regular expression debugger with real time explanation, error detection and highlighting.
- Reading API documentation
- Using the ajax() method to exchange data with a server, and update parts of the web page - without reloading the whole page.
- Using Local Storage to store persistent data
- Using Regex to check input validity
- Add an input field to specify the country (in cas two cities have the same name)
- Display the information in the user language (or using navigator.language)
No installation needed however to use the APIs mentioned above as a developer, it is necessary to sign up and request an API key on the Open Weather website.
- This project was created as part of a coding assignment with Trilogy Education Services
- Thanks to my tutors:
- Tudor for explaining how localStorage works
- Abdulraghmaan for his clear explanations about the ajax method.
- Clobee for helping me debug my code.