This Application has been coded to fetch and display live weather data by means of OpenWeatherMap APIs* and Geolocation.
*API stands for Application Programming Interface, a type of software that allows applications to communicate with each other.
Upon launching the App, the user is presented with a default city "Porto" with its corresponding live weather data:
- Temperature
- Current Date and Time
- Humidity %
- Wind Speed in km/h
- Sunset time (UTC)
- A 5 day weather forecast
- Several icons to illustrate the weather situation
- A description regarding the weather situation e.g. "Clear Sky".
The user is also able to interact with the following on the right hand side of the Application:
- A Search Engine
- A "Current Location" button
- A "°C" units button
- A "°F" units button
- A Theme button
The user may search for a city by inputting the name of a city into the search engine and submitting/pressing enter. The city name is then called by the API, and the current weather data for that city shall be displayed. Depending on the weather, and the time of day, the Application may appear different. For example, if it has already passed sunset in the searched city, the background of the App shall be darker than if it was daytime. In addition, the icons on the Application will change depending on the weather conditions. For example, if it was raining in the searched city, the icon with a cloud and rain would be displayed.
If 0 characters are submitted into the search engine, an alert will be displayed requesting the user to search for a city.
If the city in which the user submitted is not found, the display will not change.
The "Current Location" button, when pressed, will request permission for the user's location. In order for this facility to be executed, the user needs to grant permission. Once granted, Geolocation is used to pinpoint the coordinates (longitude and latitude) of the user's device. This information is then fed into a API call, which in turn responds and displays the current weather data for the city associated with those coordinates.
The Application displays the weather data in metric units (°C for temperature and km/h for wind speed). However, if the user prefers, it is possible to display temperatures in °F by pressing the "°F" button. Temperatures can be returned to metric by pressing the "°C" button. The button corresponding to the equipped unit shall appear darker with no pointer appearing during hover. When the other unit button is pressed, the reverse shall occur.
Three festive themes were implemented based on the current Month:- April - Easter
- October - Halloween
- November/December - Christmas
Once a theme has been activated, cities can be searched as normal while maintaining the theme. If the user wishes to remove the theme, they need to click the button twice This is a small bug which will be rectified after gaining a stronger understanding of functions and how to circumvent certain situations
This Application was built with the following technologies:
- HTML5
- Cascading Style Sheets (CSS3)
- JavaScript
- Bootstrap
- APIs and Geolocation
Pari Nathali is an up-and-coming front-end web developer studying Pro at SheCodes. Keen to develop and demonstrate her skills, she is developing her skills in preparation for a career-change. Previously a forensic scientist and crime investigator, she has a multitude of transferable skills which, combined with her passion for programming would be an asset to any team or organisation.
GitHub: https://github.com/Pari-Pt/
SheCodes: https://www.shecodesfoundation.org/students/337-seonah-nathali
LinkedIn: https://www.linkedin.com/in/pari-pt/