How to add weather api to my website?

JavaScript
1

It’s been two days that I try to integrate weather api to my website and I can not.

HTML:

<div class="weather_wrapper">
    <div class="top_wrapper top_wrapper_e">
        <div class="date">Monday,
            <br />23 Dec.</div>
        <div class="temp">-7</div>
        <div class="icon">
            <img src="http://img11.hostingpics.net/pics/8703383328.png" width="34" height="34" alt="icone" />
        </div>
        <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">
                <div class="date">Tuesday,
                    <br />24 Dec.</div>
                <div class="temp">-16</div>
                <div class="icon">
                    <img src="/themes/made_by_ola/images/meteo_widget/icons/34.png" width="34" height="34" alt="icone" />
                </div>
                <div class="clear"></div>
            </div>
            <div class="day">
                <div class="date">Wednesday,
                    <br />25 Dec.</div>
                <div class="temp">-14</div>
                <div class="icon">
                    <img src="/themes/made_by_ola/images/meteo_widget/icons/26.png" width="34" height="34" alt="icone" />
                </div>
                <div class="clear"></div>
            </div>
            <div class="day last">
                <div class="date">Thursday,
                    <br />26 Dec.</div>
                <div class="temp">-2</div>
                <div class="icon">
                    <img src="/themes/made_by_ola/images/meteo_widget/icons/14.png" width="34" height="34" alt="icone" />
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="bottom"></div>
    </div>
</div>

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'));
    }
});

PS: I wanted to do, as these screenshot:
http://img11.hostingpics.net/pics/810813Capture2.png
http://img11.hostingpics.net/pics/948771Capture1.png

2

Hi,

I’ve looked at your code, but I can’t see anything that looks like it connects to an API. Do you have a link to the weather API that you want to use on your site?

3

hello fretburner ,
thank you for your answer ,in fact I am a beginner in the field of API and this is the first time I registered on wunderground.com, and I follow the documentation to generate the key ID. later I found links and codes.
Forecast in French
http://api.wunderground.com/api/2ea138a9dd52eabe/forecast/lang:FR/q/France/Paris.json
PHP:

<?php $json_string = file_get_contents("http://api.wunderground.com/api/2ea138a9dd52eabe/geolookup/conditions/q/IA/Cedar_Rapids.json");
 $parsed_json = json_decode($json_string);
 $location = $parsed_json->{'location'}->{'city'};
 $temp_f = $parsed_json->{'current_observation'}->{'temp_f'};
 echo "Current temperature in ${location} is: ${temp_f}\
"; ?>

JavaScript with jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 <script> jQuery(document).ready(function($) {
 $.ajax({
 url : "http://api.wunderground.com/api/2ea138a9dd52eabe/geolookup/conditions/q/IA/Cedar_Rapids.json", dataType : "jsonp", success : function(parsed_json) {
 var location = parsed_json['location']['city'];
 var temp_f = parsed_json['current_observation']['temp_f'];
 alert("Current temperature in " + location + " is: " + temp_f);
 } }); }); </script>

have a nice day

4

continued http://www.sitepoint.com/forums/showthread.php?1184163-how-to-integrate-a-weather-like-on-the-site