Weather Switcher 1.000001

By  on  

A while back, CSS-Tricks Tsar Chris Coyier and I created a Weather Switcher script that connected to Yahoo!'s weather API, downloaded an XML file containing weather information for a specified zip code, and modified the website's theme based on the weather.

Yahoo! recently made an update to their response script which blew up my script. I've updated the script and now everything is working as it should.

Click here to get the updated code.

Recent Features

Incredible Demos

  • By
    prefers-color-scheme: CSS Media Query

    One device and app feature I've come to appreciate is the ability to change between light and dark modes. If you've ever done late night coding or reading, you know how amazing a dark theme can be for preventing eye strain and the headaches that result.

  • By
    MooTools Zebra Tables Plugin

    Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables -- tables with alternating row background colors. The CSS The above CSS is extremely basic.

Discussion

  1. russ

    I am having a problem trying to find out how to extract the degrees (e.g 85F) to display it along with the data you have provided. New to this, so any help would be most appreciated.

  2. I’ve put your weatherswitcher to work on my weather station site. The panoramic picture banner of the lake changes according to how the weather is doing. I love it. Thanks a bunch. http://stillwaterweather.com

  3. thor

    I’ve integrated the script pretty easy (despite I’m a nob). How can i know for sure day and night right codes for 27 mostly cloudy (night), 28 mostly cloudy (day), 29 partly cloudy (night) and 30 partly cloudy (day)? How can i declare this in according css? Thanks in advance!

  4. Anna

    hey, i was inspired by your other post, and extended it a little showing the users weather, instead of your own, take a look: http://www.reigndesign.com/blog/make-your-blog-weather-interactive-in-6-easy-steps/. thanks for the post in the first place :)

  5. Unfortunatetly, in recent days weatherswiticher has not been automatically changing the banner header picture to corresopond to the lastest change in weather conditions. I don’t know what’s wrong. It still reports weather condition changes though. Script in use at http://stillwaterweather.com

  6. @Danny: All is well now with the weather switcher at my site. I ran my css file thru a validator and got it fixed that way. As a result, the weather switcher works in any browser, too, that I have tried. I haven’t tried it in Oprah, though.

  7. Ryan

    How could I mod this to include the time. So I could change the image according to weather AND time of day?

    Thanks!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!