It was created as part of SheCodes project, hosted on Netlify. For the demo, please visit - https://elegant-brahmagupta-cfd2cc.netlify.app.
This weather application is using real-time data from the OpenWeatherMap API - https://openweathermap.org/. This application is not collecting or storing any data from the user, and it does not have any integrated tracking on cookies on the site. This application's primary function is to display weather data and forecast for the user's selected city.
In this application user can:
- Search for a city. Weather data is available for most cities; however, there might be cases where the data for smaller towns might not be available. In this case, the user will be presented with the feedback.
- Use the map icon to get weather data for the current location. For this, the user will need to enable/allow location sharing on a browser.
- Show when the weather data was last updated.
- Show the weather forecast with maximum temperature for the selected city in 3-hour time slots for the next 9 hours.
- User can select to display Fahrenheit or Celsius temperature.
- User can see the weather description, for example, "light rain", "showers" or similar.
- User can see wind speed and humidity data for their searched city.
Icons - https://ui8.net/piqodesign/products/weatherly Illustrations - Royalty-free /www.dreamstime.com
Technologies used include Vanilla JS, WeatherMapAPI and Bootstrap.
Low and Hi-fidelity wireframes available on request.
More comments available in the code.
The website was regularly tested on most devices, and it is designed to fit the majority of screen sizes. Please see the mockups below: