No Need For The Weather Network
Want to take a look at the weather from one of Canada’s 100 most populated cities, then this app will help your need. This app will grab the data from the corresponding city in the drop down menu and display it to you.
Features include:
- Drop down of 100 of Canada’s most populated cities, populated by an XML file
- Weather data of the selected city populated from a Web API XML response
- Dynamic weather and wind direction icons
- A loading screen and gray-out transitions for changing cities
- A cookie that saves the last city seen for the next app use
With the use of OpenWeatherMap’s Web API, I created a functioning weather app for my first project in the Client Side Programming course. This project had a lot of tasks that had to get done, one of the first tasks was getting the physical data.
The API sent the info in XML format, so I used a function that would first get the city that the user selected from the drop down, then have it grab the specific pieces of info the app needed and then place it in correct locations. This allowed the app to be responsive when the user selects a different city.
Another task that I found interesting was setting up the cookie for the site. The purpose of the cookie was so when the user left the app, when they returned, it would be back on the last city they have visited. I took care of this by getting the app to check what value the cookie had when populating the drop down. When the app found the cookie’s value, it would then set it has the selected city and show the weather data the next time the user ran the app.
JavaScript is a language I’m very fond of and I love to make apps with it, the next step of improvement for this app would be to port it over to Angular, where less code would be needed to recreate the app. With a bit a MEAN stack programming, it could be possible that the user could add their own cities, if the API supported it.
Want to run the app for yourself, click here.