A Prototype of the Weather Determination Application developed using OpenWeatherMap API, that lets you know about the Weather Conditions of any place. The main aim of this project is to come up with a system that provides real time Weather Information quickly and efficiently
- HTML
- CSS
- JAVASCRIPT
-
- OpenWeatherMap API
This Weather Application will first land in a page that requests to either login or sign up.
It is mandatory to select sign up. The reason is explained in the upcoming lines.
This project deals with with front-end web development. Thus a Session Storage is used to first record the Email address, Username & Password. Which means that the details thus entered will be valid for that particular session of the application only and will be erased once the session is over.
Once the sign up process is over, the next step is to login with the details you entered earlier.
NOTE: Both Login and Sign Up use JS to ensure that the user enters all the details. If not any one of the following messages may be displayed as a popup.
- Enter the Email
- Enter the Password
- Enter the Username
- Enter the Email and Password
- Enter the Email and Username
- Enter the Password and Username
After all the details have been entered the next step is to check if they match with those entered during sign up. If not a popup alert is displayed again
Once the login is successful the Home Page is displayed. It consists of the following major links.
- Get the weather
- Logout
The two major options by which the weather could be retrieved are
- By Current Location
- By City name
A function is implemented using JS to retrieve the Current Latitude and Longitude of the user which is then used to make an api call to retrieve the weather conditions of the current location
This first lands you in a page that requests for the Name of the City along with the Country Code for accurate prediction of the weather. An api call is made using the given details to retrieve the Latitude and Longitude of the City. Another api call is made using the Latitude and Longitude of the City. And finally the real time weather conditions of the prescribed location is displayed
NOTE: Just like in the Login/Sign up page, here the JS code is used to check if the user enters all the details. If not appropriate message regarding the condition is displayed.
This feature gives you more information about the Weather in terms of Precautions, food habits etc..
This application also provides you with an option to switch between the various units of measurement of the temperature namely Celsius, Fahrenheit and Kelvin.
This directs the user to the Landing Page again
This project could be further developed by including mechanisms for forcasting the future conditions of the weather. A history could be used to keep a constant track of the weather conditions of a place