Vanilla JavaScript Weather App
A weather journal application implemented as part of Professional Web Development Track offered by egFWD Initiative through Udacity.
Table of contents
Installation
To use this project, you need to follow the commands below:
- Clone the repository into your local machine:
git clone https://github.com/ibrahimelmokhtar/js-sample-weather-app.git
- Run the local server:
node .\server.js
- Open the local website on
http://127.0.0.1:5000
Development
(Back to top)
In this section, I will explain how the code works and how everything is put together.
Interface and Architecture
Architecture
This project has the structure shown below:
node_modules
website
- assets
- css
-- responsive-tablets.css
-- responsive.css
-- styles.css
- js
-- app.js
- index.html
package.json
README.md
server.js
Usability
This website has a Responsive Design. This means: "All features are usable across modern desktop, tablet, and phone browsers."
Weather App Behavior
1. Zip Code Coordinates
The user is able to enter a specific zipcode, then the website will use this zipcode to fetch weather data from OpenWeatherMap API using a URL similar to https://api.openweathermap.org/data/2.5/weather?zip={zip}&appid={API key}&units=imperial
.
2. Handle User Feelings
The website can handle the user feelings and display them, or hide them if the user did NOT enter anything.
3. Weather API Data
The Web API will return an object contains key/value pairs, but I used the following highlighted ones ONLY.
{
...
"weather": [
{
...
"description": "clear sky", π
"icon": "01d" π
}
],
"base": "stations",
"main": {
"temp": 282.55, π
...
},
... ,
"dt": 1560350645, π
"sys": {
...
"country": "US", π
...
},
...
"name": "Mountain View", π
"cod": 200 π
}
4. Display Basic Obtained Result
The website displays the following items as a search result:
- Weather Temperature in Fahrenheit.
- Current Date.
- User Feelings.
Additional Features
1. Latitude and Longitude Coordinates
The user is able to enter a specific latitude and longitude coordinates, then the website will use these coordinates to fetch weather data from OpenWeatherMap API using a URL similar to https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}&units=imperial
.
2. Current Location
The website can use the user's current location to find latitude and longitude coordinates, then use these coordinates to fetch weather data using latitude/longitude method.
3. Selection of Temperature Degree
The user is able to choose between (Fahrenheit degree) and (Celsius degree) to display the obtained temperature value.
4. Display More Information
The website displays the following additional items along with the search result:
- Weather Condition Icon: by fetching a specific image using URL similar to
https://openweathermap.org/img/wn/{icon}@2x.png
. - Weather Temperature in Celsius, when selected.
- Weather Condition Description.
- City, Country Names.