Weather Website

Gets the Weather and a Related Image

I wanted practice making a functional website, so I opted for a simple weather one. I'm sure there are many better one's out there, but I haven't made one yet. 

I wanted it to:

- Allow the user to search for a city,
- Display the temperature, conditions, and windspeed,
- Update the background to a related image, and
- Automatically detect the users location if the user wants.

My first idea was to build a javascript program that would pull weather data from somewhere like The Weather Network, or Yahoo. About 5 minutes into my search for how to do that it occurred to me that I do not need to reinvent the wheel; someone's GOT to have a script that already does this. That someone was James Fleeting. He made a great little Javascript Plugin called SimpleWeather.js . This script would get all the weather information I needed (and more!) and accept City, state, country, zip, and latitude and longitude as queries. 

It took me a bit to understand how to get it to work, not because it was a difficult script, but because I'm still quite new to this, but I got it up and running. The hardest part was figuring out how to get it to accept a variable as a location so I could hook it to my input field and button. 

With the weather updating correctly, the next thing to do was to find out how to change the background image. I knew I needed to pull images from an image hosting site, but I didn't know how. I first thought to find out how to send search terms to Google Images and retrieve the first image result, but that proved to be more difficult than I thought. It doesn't seem like a simple bit of script for that exists, for free anyway. A bit of digging on the goldmine that is Stack Overflow and I found a script that would take in a keyword and return a random image from a small, free, publicly available feed from Flickr. The pictures aren't great (it'll sometimes return a random image of a bunch of people when I'd really like a photo of a city), but it's free and it works. I added that in, then faced my next problem: getting the city and region out of the SimpleWeather script and into the Flickr script. 

The nice thing about the SimpleWeather script is it'll take a location in a variety of forms, then determine the corresponding city and region, so I didn't have to find a way to convert the users search terms to something Flickr-searchable, but I had a devil of a time figuring out how to properly hook the two scripts together. I did eventually figure it out though, and got the image changing. The only problem was the image was tiled. MORE tweaking later, and I got it to be full size. 

Finally, I updated James's script to his newer version that can request the user's location (if their browser supports it). 

Unfortunately the location detection doesn't seem to work on this host, but everything else does, and if you copy the script below to your own computer and give it a try, it should work for you too. Be sure to download the SimpleWeather.js  package from the website before running it though!

Code available here.
Test the website here: Weather Website