DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations

Trending

  • Java Concurrency: Condition
  • Grow Your Skills With Low-Code Automation Tools
  • Opportunities for Growth: Continuous Delivery and Continuous Deployment for Testers
  • 4 Expert Tips for High Availability and Disaster Recovery of Your Cloud Deployment

Trending

  • Java Concurrency: Condition
  • Grow Your Skills With Low-Code Automation Tools
  • Opportunities for Growth: Continuous Delivery and Continuous Deployment for Testers
  • 4 Expert Tips for High Availability and Disaster Recovery of Your Cloud Deployment
  1. DZone
  2. Coding
  3. Languages
  4. Using Weather Data to Change Your Website's Appearance through PHP and CSS

Using Weather Data to Change Your Website's Appearance through PHP and CSS

Chris Coyier user avatar by
Chris Coyier
·
Feb. 16, 08 · News
Like (0)
Save
Tweet
Share
19.13K Views

Join the DZone community and get the full member experience.

Join For Free
using a little magic and trickery (read: php and css), we can change the appearance of a website automatically based on the weather outside, in real time ! in the example site we have created, the header graphic will change to one of four different styles based on sunny , rain , snow , and cloudy .



step 1: designing your weather graphics

our example site changes header graphics as as well as an icon in the sidebar to describe the weather. for the sake of example, we only created four different weather scenarios, defaulting to sunny.

headerexample-partlycloudy.jpg headerexample-rain.jpg headerexample-snow.jpg headerexample-sunny.jpg



step 2: retrieving the weather information



yahoo! has an api for weather information. we can tap into this very easily using an url formatted like so:

http://weather.yahooapis.com/forecastrss?p= 97211 &u= f

the 5-digit number is your zip code and the "f" stands for "fahrenheit" (change to "c" for "celsius"). the information comes in xml format and it's up to you how you want to parse the data. since the only bit of information we care about is the "yweather:condition" element's "text" attribute, we;re going to avoid creating an xml parsing object and use a short regular expression.

once the regular expression returns the yweather element's text, we'll use str_replace() and strtolower to format the string into a representative css class.



step 3: turning the weather information into an css class



here is the php code:

<?php

	/* get xml, find match */

	/* get the weather from yahoo */
	$data = get_data("http://weather.yahooapis.com/forecastrss?p=97211&u=f");

	$weather_class = format_result(get_match('/<yweather:condition text="(.*)"/isu',$data));

	/* debug to see what we got back */
	//echo '<pre style="background:#fff;font-size:12px;">['; print_r($weather); echo ']</pre>';

	/* format the result */
	function format_result($input)
	{
		return strtolower(str_replace(array(' ', '(', ')'), array('-', '-', ''), $input));
	}

	/* helper:  does regex */
	function get_match($regex,$content)
	{
		preg_match($regex,$content,$matches);
		return $matches[1];
	}

	/* gets the xml data from alexa */
	function get_data($url)
	{
		$ch = curl_init();
		$timeout = 5;
		curl_setopt($ch,curlopt_url,$url);
		curl_setopt($ch,curlopt_returntransfer,1);
		curl_setopt($ch,curlopt_connecttimeout,$timeout);
		$xml = curl_exec($ch);
		curl_close($ch);
		return $xml;
	}

?>


now we have a variable we can echo out that is representative of the current weather at the zip code we provided:

<div class="header header-<?php echo $weather_class; ?>">
</div>




step 4: code your css for each of the classes



.header {
width: 782px; height: 150px;
/* defaults to sunny */
background: url(images/header-sunny.png) no-repeat center center black;
}
.header-rain {
background: url(images/header-rain.png) no-repeat center center black;
}
header-snow {
background: url(images/header-snow.png) no-repeat center center black;
}
.header-sunny, .header-fair {
background: url(images/header-sunny.png) no-repeat center center black;
}
.header-partly-cloudy, .header-cloudy, .header-mostly-cloudy {
background: url(images/header-partlycloudy.png) no-repeat center center black;
}




step 5: extending the idea



notice that we use the "partlycloudy" graphic for the weather conditions of "partly-cloudy", "cloudy", and "mostly-cloudy". it's up to you how specific you want to get. here is a full list of the possible weather conditions from yahoo!:

0  	tornado
1 tropical storm
2 hurricane
3 severe thunderstorms
4 thunderstorms
5 mixed rain and snow
6 mixed rain and sleet
7 mixed snow and sleet
8 freezing drizzle
9 drizzle
10 freezing rain
11 showers
12 showers
13 snow flurries
14 light snow showers
15 blowing snow
16 snow
17 hail
18 sleet
19 dust
20 foggy
21 haze
22 smoky
23 blustery
24 windy
25 cold
26 cloudy
27 mostly cloudy (night)
28 mostly cloudy (day)
29 partly cloudy (night)
30 partly cloudy (day)
31 clear (night)
32 sunny
33 fair (night)
34 fair (day)
35 mixed rain and hail
36 hot
37 isolated thunderstorms
38 scattered thunderstorms
39 scattered thunderstorms
40 scattered showers
41 heavy snow
42 scattered snow showers
43 heavy snow
44 partly cloudy
45 thundershowers
46 snow showers
47 isolated thundershowers


for this example, you'll notice we also used a hard-coded zip code that must be changed in the php in order to change where the website will be basing it's weather appearance on. but wouldn't it be cool if the website knew the zip code of your visitors and would change the appearance of the site based on their weather instead of your weather? that kind of coding requires services and expertise beyond the scope of this tutorial, but a quick google search brings up some services that could probably make this happen like ip2location .

have fun! - and let me know if anyone actually uses this, i'd love to see what you did with it.

weather-switcher.jpg

original post here .
CSS PHP Data (computing)

Opinions expressed by DZone contributors are their own.

Trending

  • Java Concurrency: Condition
  • Grow Your Skills With Low-Code Automation Tools
  • Opportunities for Growth: Continuous Delivery and Continuous Deployment for Testers
  • 4 Expert Tips for High Availability and Disaster Recovery of Your Cloud Deployment

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: