Weather Journal App

This project is an asynchronous web app that uses Web API and user data to dynamically update the UI for a Weather-Journal App.

Table of contents

• Installation
• Usage
• Development

Installation

To use this project, first clone the repo on your device using the command below:
git clone https://github.com/Abdorithm/weather-Journal-App.git
Then, the repo will be downloaded on your machine.
You can also download it as a zip file or fork it to your account.

(Back to top)

Usage

After installation, you'll be able to navigate through the project folder, the architecture of the project files is:

server.js
README.md
website
 js
  - app.js
 css
  - style.css
 index.html

You'll need to have node.js installed in your machine in order to setup the server.

(Back to top)

How to use?

1. Begin by opening the server.js in your editor.
   
2. Make sure you have node.js installed by running this command in the terminal

node --version

3. Install the packages express, body-parser and cors by using the command

 npm install {package_name}

4. Start the server by using the command

node server.js

5. At this point, you'll be able to open the website in your browser. By entering your zip code, you'll get the current temperature in your area/city.

(Back to top)

Development

The main idea of this project is to use HTTP routes & requests and Asyncronous JavaScript to get data from an API and use it in the app.

1. Setting up the environment.

I made sure node.js is installed from the terminal. Then, installed the packages express, body-parser and cors from the terminal and included them in server.js file. After that, I created a server running on port = 8000 and added a console.log() to the server callback function to test if it's running.

2. Server-side GET & POST routes.

I added a GET route that returns the projectData object in the server code. Then, added a POST route that adds incoming data to projectData.

3. Acquiring API credentials.

By using the credentials from OpenWeatherMap website and the base url

I created global variables at the top of app.js code.

Wrote an async function in app.js that uses fetch() to make a GET request to the OpenWeatherMap API.

Created an event listener for the element with the id: generate with a callback function to execute when it is clicked, then called the async GET request inside it.

4. Client-side chained promises.

Finally, I chained another Promise that gets the API data & makes a POST request to add the API data, as well as data entered by the user, to the app. I also added to it a function that updates the UI based on that data.

getWeather(baseURL, data['zipCode'], apiKey)
    .then((info) => {
      // the city name and temperature is obtained from the API
      data['temp'] = info.list[0].main.temp 
      data['cityName'] = info.city.name 
      console.log(data)
      // POST request
      postWeather('/postAll', {temp: data.temp, city:data.cityName, date: data.date, feel:data.feelings})
      //Update the UI
      updateUI()
    })

(Back to top)