This project creates an asynchronous web app that uses a weather web API and input by the user to pass data between client and server-side and dynamically update the UI of the page. Check it out if you want to learn more about setting up a local server, writing GET and POST server and client-side code, and how to use data from an API and from user input to change the content of a web page. Enjoy!
Start by setting up your project environment.
- Download and install Node.
- The packages
express
,body-parser
, andcors
are dependencies from thepackage.js
file. Install them by typingnpm install
. - Go to OpenWeatherMap and create a free (Current Weather Data) API key
- In the file
app.js
, replace the first part ofconst apiKey = 'xxxxxxxxxxxYourAPIKeyHerexxxxxx&units=metric';
with your API key and save the file - Start the local server
node server.js
. You should see the messageServer is running on localhost: 9000
- Open
index.html
in Google Chrome - Enter a 5 digit US zip code such as 10023 in the first field, how you are feeling in the second and click the button. Then you should see today's date, the temperature in Celsius and the text you entered displayed in a box.
The server.js
and the website/app.js
files are where most of the magic happens. You can checkout index.html
for element references, and use style.css
to customize the style of the application.
This project of Udacity's Fron End Web development Nanodegree. If you are interested, or just want to freshen up your Front End game, I can highly recommend the course!