ibrahimelmokhtar/js-sample-weather-app

Sample Weather App - Professional Web Development egFWD - Second Project

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

• Project Title
• Table of contents
• Installation
• Development
  • Interface and Architecture
    1. Architecture
    2. Usability
  • Weather App Behavior
    1. Zip Code Coordinates
    2. Handle User Feelings
    3. Weather API Data
    4. Display Basic Obtained Result
  • Additional Features
    1. Latitude and Longitude Coordinates
    2. Current Location
    3. Selection of Temperature Degree
    4. Display More Information

Installation

(Back to top)

To use this project, you need to follow the commands below:

1. Clone the repository into your local machine: git clone https://github.com/ibrahimelmokhtar/js-sample-weather-app.git
2. Run the local server: node .\server.js
3. 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

(Back to top)

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

(Back to top)

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:

1. Weather Temperature in Fahrenheit.
2. Current Date.
3. User Feelings.

Additional Features

(Back to top)

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:

1. Weather Condition Icon: by fetching a specific image using URL similar to https://openweathermap.org/img/wn/{icon}@2x.png.
2. Weather Temperature in Celsius, when selected.
3. Weather Condition Description.
4. City, Country Names.