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.


<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="" width="34" height="34" alt="icone" />
        <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" />
    <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 class="clear"></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 class="clear"></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 class="clear"></div>
        <div class="bottom"></div>


var meteostatus = 0; // closed
$('#meteo_controller').click(function() {
    if (meteostatus == 0) {
        meteostatus = 1;
        $('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('open', 'close'));
    } else {
        meteostatus = 0;
        $('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('close', 'open'));

PS: I wanted to do, as these screenshot:


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?

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, and I follow the documentation to generate the key ID. later I found links and codes.
Forecast in French

<?php $json_string = file_get_contents("");
 $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=""></script>
 <script> jQuery(document).ready(function($) {
 url : "", 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