Personal Project Finished

Last night I wrapped up my work on my individual project. While I am happy that it is finished, I am disappointed that I could not get my site functioning as I originally planned. As a refresher, my site is for a tree care company and I was designing an application for users to submit a bid request. As it stands now, I pull data from the Weather Underground API and Google Calendar RSS feed and display it. The page automatically displays todays weather and the most recent event on the calendar. This would be the first thing that I would change if I had more time to work on the project. I would use a javascript calendar to dynamically display a calendar to my user so they can pick a specific date they wanted to have a bid on.

Another shortcoming for my application is how the data is displayed. I was hoping to throw the results from my API's into a equation that would display an image showing the likelihood that the bid would happen on the requested day. For example, if the calendar showed 9 appointments and the weather was forecasted as rainy, the application would return a sad face and tell the user to select another day. If it was going to be sunny and there were only 3 appointments for that day, the program would return a happy face.

Finally, I am also unhappy with the functionality of the calendar as I have implemented it. Right now I am iterating over the RSS feed from the calendar. What I needed to do was use the GCal data API to be able to download and upload data to the calendar. This requires the use of authentication which didn't appeal to me for usage by customers that wouldn't have access to the calendar.

Part of why I settled with my project as it is now is because the owner of the tree service company, a.k.a. my father, showed a lack of interest in the application. To him, he didn't like the idea of customers telling him when to do a bid. He would much prefer them send him an email telling them what they were interested in and then he would set the final date for the bid. I'll have to rethink this system to better match his business needs before spending a lot of time developing an application that would never be used!

Yahoo Weather API

For the class project I wanted to implement a weather api to display current and future weather forecasts for a specific location. I was able to find what I needed in the Yahoo weather API. The Yahoo weather API uses a REST interface and returns the requested data in an RSS 2.0/XML 1.0 format. I want to show you how easy it is to implement this API into your own web page.

The first part of implementing Yahoo Weather into your web page is connecting to the Yahoo web service using the REST interface. Using AJAX and the request method (request.open("GET", url, true)), you use the following URL to connect and retrieve the weather data. To get weather for your desired location, insert your desired zip code after "p=".
http://xml.weather.yahoo.com/forecastrss?p=48226. By clicking on the link you will see the weather displayed as an RSS feed. (Remember to use a web proxy to connect to the server when making your AJAX request)

The next part is getting the weather information retrieved from your request into your web page.

1. Create a div element into your .html page.

2. Parse the data and insert the weather information into your div element. Below is the code I have used to insert the weather information into your web page





Code Broken Down:

var xmlDoc = request.responseXML;
This line of code takes the response from the request and converts it into a Document Object Model (DOM) object

var title = xmlDoc.getElementsByTagName('description')[0].firstChild.nodeValue;
Returns the results from the first description tag in the xml file and saves it as a variable

var dateTime = xmlDoc.getElementsByTagName('lastBuildDate')[0].firstChild.nodeValue;
Returns the results from the lastBuildDate tag in the xml file and saves it as a variable

var description = xmlDoc.getElementsByTagName('description')[1].firstChild.nodeValue;
Returns the results from the second description tag in the xml file and saves it as a variable

document.getElementById("weather").innerHTML = + title + dateTime + description;
Outputs the variables previously saved into a div on your web page

The final Product will look like this


Enjoy!!