Skip to content

A web application that utilizes Node.js and JS Promises to fetch the weather and temperature of the user's desired location and present it in a user-friendly UI.

Notifications You must be signed in to change notification settings

ahmedd-osama/Weather-Cards-API-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

API Weather journal App by Ahmed Osama

githup: @ahmedd-osama

overview

the app is using the async method provided natively in javascript to fetch data from an external API: Open Weather Map. The user can search the weather of his location by city name or Zipcode. After fetching the data from the API, the app present a card with the information fetched from the data including: location, Date, Temperature, and weather State. The themes of the card can be changed according to the temperature of the location. the new card include a textarea for the user to record their journals and save it in the 'My Journals' section as demonistrated in the app.

The app also could run with a server side coding and storaing of the user entry in the server.js file created with Node.js and other packeges including express, bodyparser, and cors.Any future upgrades may include configuring the server side to store the users' data in a database. Currently, the app endpoint data is stored in a variable in the server called projectData.

the app.js uses javascript async promises to perform POST and GET actions to send and receive data to and from the server.

Instructions Of Usage:

before you run the application, you should know that you need an OpenWeatherMap.com API Key in order for the app to fetch the data of your location. In case you do not have one, you can easily sign up for free and get one at https://home.openweathermap.org/users/sign_up .

There are Two options to run the app.

1- running without running the server side script:
Insutructioins:
1- in the website folder, you will find an index.html. Just run the file using your internet browser.
2- when you oben the app you, click on key icon on the right of the screen to get directed to the API key input bage. once you enter a valid API key, the icon will turn from red to green. Then you can use the application normally.

2- running with running the server.js script.
The server side is utilizing Node.js modules, so, you will need to install node.js on your device to be able to run the app with the server side. the node.js Dependancies (packages) you will need to install are Express, Bodyparser, and Cors. Additionally, You will find a package.json containing the information about the server side a long with the dependancies used in the project.
Instructions: 1- There is two different changes you will meke in the app.js code. first, go to line 125 of app.js file at the saveBtn.onclick function and follow the instructions mentioned in the comments. you will comment the code that makes the program run offline and un-comment the code that activates the server side. secondlly, at the end of the app.js file at line 380 you will do the same by following the insturctions in the comments.
2- After installing the Node.js dependancies needed for the application (stated above). open the terminal and rout to the directory containing the server.js file. and run the file using node by typing the command "node server.js"
3- Once the server.js file is running the application will be hosted on the port 8000: localhost:8000 by default.
4- Head to localhost:8000 by your internet browser to be able to find the app.
5- when you oben the app you, click on key icon on the right of the screen to get directed to the API key input bage. once you enter a valid API key, the icon will turn from red to green. Then you can use the application normally.

Extra information / Attributions:

1- in the main folder of the app you will find a folder with the name 'node_modules' which is created with the package.json file by Node.js
2-The application uses Fontawesome for Icons.
3- The diferent illustrations of the themes of the cards are from Freepik website.

About

A web application that utilizes Node.js and JS Promises to fetch the weather and temperature of the user's desired location and present it in a user-friendly UI.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published