A weather dashboard application that allows the user to search for any city and obtain weather information, such as weather description, temperature, humidity, wind speed, UV index and more.
Built with HTML, CSS, Bootstrap, JavaScript, jQuery, Moment.js, OpenWeather API, and Windy MAP API.
To create a weather dashboard that will run in the browser and feature dynamically updated HTML and CSS.
Use the OpenWeather API to retrieve weather data for cities.
Main elements:
- Cities search functionality.
- History of cities searched, storaged locally in the browser.
- Display current weather information.
- Display forcast information for the next 5 days.
- Display a Windy Map of the selected city.
In order to accomplish the challenge, the following steps were executed:
- Define the purpose, and plan the general idea of the application.
- Understand the basic functionality of the OpenWeather API.
- Research and understand how to retrieve a map with the Windy.com API.
- Search for assets (weather dashboards references, icons, etc.)
- Define and build the base layout and grid, considering two stages:
- Mobile-first approach.
- Responsive design for larger screen sizes.
- Create search functionality.
- Create current weather display functionality.
- Create forecast weather display functionality.
- Integrate the Windy Map.
- Apply semantic HTML.
- Asses valid HTML with W3C validator.
- Benchmark the site with WebsiteGrader.
- Final review and proper documentation.
With the described process we were able to create a useful, efficient and responsive Weather Dashboard application that display current and 5 days forecast of the selected city.
The application
The project was uploaded to GitHub at the following repository: https://github.com/jorguzman100/06_Weather_Dashboard
You can access the deployed application with the GitHup Pages link: https://jorguzman100.github.io/06_Weather_Dashboard/