Im not sure, but it probly is a Javascript.

This site is best viewed in a modern browser with JavaScript enabled.

Im not sure, but it probly is a Javascript.

Hyno

Hello,

I've worked with some scripts as html, css and php, but now I have something that I don't know what kind of script I have to use.

I want to load data or (rss) feed about the weather from somewhere up-to-date. If this feed says it's going to rain, i want my webpage to load several things like a text which says it's going to rain, a button with a link and some rain drops which will probly be made in a transparancy flash layer.

So i need a script which loads feed, which sees if it is going to rain or not and which can load several things when it is going to rain and leave these things if it is not going to rain.

I hope someone can give me some advice about which kind of script, like java or something else. And maybe some more specific, so i know what to look for.

Thanks a lot!

johhny-s

This is a cool idea. There's a few things to it. Off the top of my head:

you need weather data;
look for your local weather bureau and find where they provide an xml feed of the weather conditions. if you are doing it for just one location (ie if your site is targeted for just one state then use that). if you want to provide the weather for where ever your user is going to come from in the country or world then you will have to be smarter. you will need to find their location by using an IP to Geolocation service, and then loading the data for that country/state.
save that data for the day
you dont want to have to look up the weather each time someone loads your site; so at the start of every day (or maybe 4 times a day) you should make the weather request, and then store the weather forcast in your local database, so that its much quicker for your users to load.
based on the weather conditions, make the changes to your templates; ie it might involve putting a body class on like "weather-rainy" and then have your style sheets over lay some rain drops and clouds etc

the way i would approach this would not use javascript; it would use a server side language (ie PHP or dotnet etc)

Hyno

Hey jhonny-s,

Thanks for your reaction, im going to work on it. You say I have to save the weather data for each day manual?
And i came with another idea when i was reading your comment. I want a function where users can search for residence or zip, does this also work with a database? Or can a simple excel sheet be used for the search function?

Thanks!

johhny-s

Hyno;1241229 wrote:
You say I have to save the weather data for each day manual?

huh? no, you don't want to do this manually; you would find the location of the weather information data feed and then have a script that gets triggered by cron that reads new weather data once or twice a day from that data feed and saves it into your local database. once it's set up, you don't want to have to manually do anything yourself, if that's what you mean.

Hyno;1241229 wrote:
And i came with another idea when i was reading your comment. I want a function where users can search for residence or zip, does this also work with a database? Or can a simple excel sheet be used for the search function?
Thanks!

Absolutely; that's one of the reasons of having a database! It would be far more complicated and/or arduous to prepare a spreadsheet for them to download; you don't use excel like that on the web; stick with a database.

xelawho

this isn't so complicated using javascript - you can query the yahoo weather service and use the object returned which is much simpler (and more up-to-the-minute) than saving results to a database. If you want to search for residence or zip you are probably better off geocoding that first, getting their latitude and longitude and then making the request. Here's a start, anyway (the 30341 in the query is the zip code for Atlanta - change that to get other locations)...

<!DOCTYPE HTML>
<html>
<head>
<style>
#rain{display:none}
</style>
</head>
<body>
<img id="cond"></img>
<div id="txt"></div>
<div id="rain">It's gonna rain!</div>
<script>
function weather(o){
var obj=o.query.results.channel.item;
document.getElementById("cond").src="http://l.yimg.com/a/i/us/we/52/"+obj.condition.code+".gif";
document.getElementById("txt").innerHTML=obj.title
+"<br>Temperature: "+obj.condition.temp
+"<br>Conditions: "+obj.condition.text
+"<br>Forecast: "+obj.forecast[0].text;
var fc=obj.forecast[0].code;
//var fc=11; //for testing
var rains=[1,2,3,4,5,6,7,8,9,10,11,12,13,37,38,39,40,45,46,47]; //rain forecast codes from http://developer.yahoo.com/weather/
  for (var i = 0; i < rains.length; i++) {
  if(rains[i]==fc){
  document.getElementById("rain").style.display="block";
  break;
	}
  }
}
</script>
<script type="text/javascript" src="http://query.yahooapis.com/v1/public/yql?q=select%20item%20from%20weather.forecast%20where%20location%3D%2230341%22&format=json&callback=weather"></script>
</body>
</html>

xelawho

hmmm... it seems that yahoo is more useful than I was giving it credit for...

<!DOCTYPE HTML>
<html>
<head>
<style>
#wrapper{display:none}
</style>
</head>
<body>
<input id="cityname" />
<input type="button" value="search by city name or zip code" onclick="getOpts()">
celsius<input type="radio" id="celc" checked name="sys"/>farenheit<input type="radio" name="sys"/>
<br>
<div id="wrapper">
<img id="cond"></img>
<div id="txt"></div>
<div id="rain">It's gonna rain!</div>
</div>
<div id="res"></div>
<script>
function weather(o){
document.getElementById("wrapper").style.display="block";
document.getElementById("res").innerHTML="";
var raindisp="none"
var obj=o.query.results.channel.item;
document.getElementById("cond").src="http://l.yimg.com/a/i/us/we/52/"+obj.condition.code+".gif";
document.getElementById("txt").innerHTML=obj.title
+"<br>Temperature: "+obj.condition.temp
+"<br>Conditions: "+obj.condition.text
+"<br>Forecast: "+obj.forecast[0].text;
var fc=obj.forecast[0].code;
//var fc=11; //for testing
var rains=[1,2,3,4,5,6,7,8,9,10,11,12,13,37,38,39,40,45,46,47]; //rain forecast codes from http://developer.yahoo.com/weather/
  for (var i = 0; i < rains.length; i++) {
  if(rains[i]==fc){
  raindisp="block"
  break;
	}
  }
document.getElementById("rain").style.display=raindisp;  

document.body.removeChild(document.getElementById("myscript"))  

}

function showIt(num){
var unit=document.getElementById("celc").checked?"'c'":"'f'";
var scr=document.createElement("script")
scr.id="myscript"
scr.src="http://query.yahooapis.com/v1/public/yql?q=select%20item%20from%20weather.forecast%20where%20woeid="+num+"+%20and%20u="+unit+"&format=json&callback=weather";
document.body.appendChild(scr)
}

function makeList(o){
if(!o.query.results){document.getElementById("res").innerHTML="Invalid city name. Please try again"; return}
var obj=o.query.results.place;
if(obj.length>1){
document.getElementById("res").innerHTML="Did you mean...<br>";
for (var i = 0; i < obj.length; i++) {
document.getElementById("res").innerHTML+=obj[i].name+", "+obj[i].admin1.content+" "+obj[i].country.code+" <input type='button' value='get weather' onclick='showIt("+obj[i].woeid+")'/><br>";
	}
} else {
showIt(obj.woeid)
}
document.body.removeChild(document.getElementById("numscript")) 
}

function getOpts(){
var city=document.getElementById("cityname").value
document.getElementById("wrapper").style.display="none";
var scr=document.createElement("script")
scr.id="numscript"
scr.src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20geo.places%20where%20text%3D%22"+city+"%22&format=json&callback=makeList";
document.body.appendChild(scr)
}
</script>
</body>
</html>