Hello,
Here is what I did, I searched the internet and I found it necessary to make a weather API to get the weather on his site, I registered on several sites and I followed the documention and here I am lost.
how to integrate a weather like on the site http://calypsopark.com ? or what are the steps to follow to get the exact same thing ?
have a great day
Following on from the previous thread, I took a look at the links you provided. You can get all the data you need from the forecast dataset - the url will be something like http://api.wunderground.com/api/<your-api-key>/forecast/q/CA/San_Francisco.json (depending on what location you want the data for, obviously).
If you want to do this with Javascript / jQuery, you can use a simple $.getJSON call to fetch the data:
$.getJSON('http://api.wunderground.com/api/<your-api-key>/forecast/q/CA/San_Francisco.json')
.done(function(data){
// Do something with data here
});
The data for the current day, and the forecast for the next 3 are in the array data.forecast.simpleforecast.forecastday. I’ve put together an example of how you could display a widget like the one on the calypso park website:
<!DOCTYPE html>
<html>
<head>
<title>Weather API Test</title>
</head>
<body>
<script type="text/html" id="weather_tmpl">
<div class="weather_wrapper">
<div class="top_wrapper top_wrapper_e">
{{=day0}}
<div class="bt_control" id="meteo_controller">
<a href="javascript://">
<img src="/themes/made_by_ola/images/meteo_widget/arrow_open.png" id="meteo_trigger_img" width="27" height="17" alt="Arrow" />
</a>
</div>
</div>
<div class="bottom_wrapper" id="meteo_future_days">
<div class="next_days_wrapper">
<div class="day first">
{{=day1}}
<div class="clear"></div>
</div>
<div class="day">
{{=day2}}
<div class="clear"></div>
</div>
<div class="day last">
{{=day3}}
<div class="clear"></div>
</div>
</div>
<div class="bottom"></div>
</div>
</div>
</script>
<script type="text/html" id="detail_tmpl">
<div class="date">{{=date.weekday}},
<br />{{=date.day}} {{=monthname_short}}.</div>
<div class="temp">{{=high.celsius}}</div>
<div class="icon">
<img src="{{=icon_url}}" width="34" height="34" alt="icone" />
</div>
</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="t.min.js"></script>
<script type='text/javascript'>
(function(){
var mainTpl = new t($('#weather_tmpl').html()),
detailTpl = new t($('#detail_tmpl').html());
$.getJSON('san_francisco.json')
.done(function(data){
var tplData = {};
$.each(data.forecast.simpleforecast.forecastday, function(index, day){
tplData['day'+index] = detailTpl.render(day);
});
$('body').append(mainTpl.render(tplData));
});
})();
</script>
</body>
</html>
Note that to make it easier to create / change the HTML needed for the widget, I’ve used a templating library called t.js which you can find here.
thank you very much for your warm support, since I am a beginner in this field I do not know why you integrated the html in the script, and I tried your script and nothing appears on my browser, this is what I added:
<!DOCTYPE html>
<html>
<head>
<title>Weather API Test</title>
</head>
<body>
<script type="text/html" id="weather_tmpl">
<div class="weather_wrapper">
<div class="top_wrapper top_wrapper_e">
{{=day0}}
<div class="bt_control" id="meteo_controller">
<a href="javascript://">
<img src="arrow_open.png" id="meteo_trigger_img" width="27" height="17" alt="Arrow" />
</a>
</div>
</div>
<div class="bottom_wrapper" id="meteo_future_days">
<div class="next_days_wrapper">
<div class="day first">
{{=day1}}
<div class="clear"></div>
</div>
<div class="day">
{{=day2}}
<div class="clear"></div>
</div>
<div class="day last">
{{=day3}}
<div class="clear"></div>
</div>
</div>
<div class="bottom"></div>
</div>
</div>
</script>
<script type="text/html" id="detail_tmpl">
<div class="date">{{=date.weekday}},
<br />{{=date.day}} {{=monthname_short}}.</div>
<div class="temp">{{=high.celsius}}</div>
<div class="icon">
<img src="{{=icon_url}}" width="34" height="34" alt="icone" />
</div>
</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="t.min.js"></script>
<script type='text/javascript'>
(function(){
var mainTpl = new t($('#weather_tmpl').html()),
detailTpl = new t($('#detail_tmpl').html());
$.getJSON('http://api.wunderground.com/api/2ea138a9dd52eabe/forecast/q/CA/San_Francisco.json')
.done(function(data){
var tplData = {};
$.each(data.forecast.simpleforecast.forecastday, function(index, day){
tplData['day'+index] = detailTpl.render(day);
});
$('body').append(mainTpl.render(tplData));
});
})();
</script>
<script>
var meteostatus = 0; // closed
$('#meteo_controller').click(function() {
if (meteostatus == 0) {
meteostatus = 1;
$('#meteo_future_days').fadeIn('slow');
$('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('open', 'close'));
} else {
meteostatus = 0;
$('#meteo_future_days').fadeOut('slow');
$('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('close', 'open'));
}
});
</script>
</body>
</html>
have a wonderful day
Try opening your browser’s console to see if there are any error messages that show what the problem is.
This looks to me like it shows / hides the panel with the weather forecast for the next 3 days, as on the Calypso Park site? It’s not necessary for my example to work.
thank you once again for fast response .
error message displayed by my browser:
t is not defined .
that’s what I’ve tried here .
after I added import t , here
Now, I do not think there is a mistake, but I was wondering why it does not display the weather on the result.
The problem with your first JS Fiddle is that you can’t link directly to the script t.min.js online - I’ve put the example code online, so you can see it working: www.nilsonjacques.com/projects/weather/
If you want to get the code running on your own computer or server, you’ll need to download the file t.min.js from the github repository and put it in the same folder as your HTML file.
EDIT: There was also an error with the code I posted previously. All the API urls need to have ‘?callback=?’ added to the end, so the forecast url for San Francisco would be: http://api.wunderground.com/api/2ea138a9dd52eabe/forecast/q/CA/San_Francisco.json?callback=?
Thank you very much fretburner ,you’re a star devellopement, you’re a very good develloper, brilliant, nothing to say.
Here is a screenshot here that shows what I say, that my problem is resolved
Thank you so much for all your help I really appreciate it , it’s been four days that I look for a solution to that, and thanks to you my problem is solved , Thank you so much really you saved my life .Very good communication, helpful and quick support. I was able to find the right solution by the answer you provided. Short in words, 10 stars out of 10. Thanks & Best Regards!
Hello fretburner,
please one last question, is there a way to replace the weather icons provided by wunderground with other more stylized icons.
Have a wonderful day
Hi mounaime10,
The forecast data for each day includes a property called ‘icon’ (with values like ‘clear’, ‘cloudy’, ‘mostlycloudy’ etc) which you could use. Change this line in the detail_tmpl from:
<img src="{{=icon_url}}" width="34" height="34" alt="icone" />
to:
<img src="images/icons/{{icon}}.gif" width="34" height="34" alt="icone" />
so you’d name your custom images mostlycloudy.gif, for example.
Thanks for helping me fretburner .
have a nice day