SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to add weather api to my website?

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

    HTML:
    Code:
    <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:
    Code:
    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. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,408
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    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. #3
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/2ea1...nce/Paris.json
    PHP:
    Code:
    <?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}\n"; ?>
    JavaScript with jQuery
    Code:
    <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
    Last edited by Mittineague; Dec 24, 2013 at 10:09.

  4. #4


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •