Final Project: Weather App

As our final project we had to remake the weather from last semester but instead of using php we had to use Node.js. This was a bit difficult since I’m still getting used to node but I finally got it to work.

Check it: Weatherapp

I did run into a few problems the first one being the most silliest of mistakes. My first mistake was thinking the my API keys were inactive but really I had it set up wrong. The example on the Open Weather was this, “{APIKEY}”. You are supposed to take the curly braces out and just put your API key but what I did was leave the braces with my API key. This kept giving me an error of invalid API key.

Once I finally resolved the API key issue I went to look at some past tutorials to review how to use the body-parser package. Body-parser made it easy for me to be able to gather the information that I needed since it can turn the JSON information you get into an object. The problem I ran in was turning to figure out what was the request I needed to make so I can get th information into my ejs file. I ended up using both a GET request and a POST request. The GET request would just rendered the ejs file to get to the Index page. Here the user is able to put the city they want the weather from. Once the user inputs the city and clicks submit the POST request would run. The POST request grabs the input the user made and adds it to the search request its sending to OpenWeather. Once the information gets back it is displayed on the page for the user to see.

GET Request.

POST request.

Another issue ran into was handling an error. When the user typed in an invalid city it just sent them to an error page. What wanted to do was keep them in the Index route but just have the error code come up with the error message. I also add another part to the message telling the user to try again. This part took the longest because I had to make sure I was declaring the right variables in the ejs file so that no undefined error came up. I also had to right the if statements in the correct order for this to work as well.

Perus = Typo

Error message the user gets.

The next thing I work on was getting the the div that held the weather or error information come up only once the the submit button was clicked. I need this by making an if statement where if the data was empty it would display none and once the data had information about the weather or error it would display. This project was a great way to practice what I’ve been learning this semester about node.js and I really enjoyed it.

My Weather App Code:


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *