How to build weather application using JavaScript|OpenWeatherMap API

September 29, 2020

How to build weather application using JavaScript|OpenWeatherMap API

Hello, guys welcome to this tutorial. In this tutorial, I am going to share with you how to build a basic weather web application in a very easy way. In my previous post, I had discussed how to create an API key and here we gonna implement it together.

Below you can see the overall layout of the application you can implement or design the layout as per as you want but I kept it very simple.

In this simple layout, there is country details, search engine, basic present weather data also hourly and 5 days weather forecast.

To make the application we will use a weather API to get the live data from their server. Here In this tutorial, we gonna use OpenWeather API. So if you don't have an API key then you can create it like that Create OpenWeather API key .

CODE

<!DOCTYPE html>
<html lang="en" dir="ltr">

<!-- we gonna use bootstrap for the layout --!>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <title>Geo Weather</title>
</head>

<!-- Some internal css for colors and mouse events. --!>

<!-- Body part --!>

<!-- Inside our first column of the grid there is Country, Temperature unit and Search engine --!>

           <div class="col-sm-3">
                 <label for="country">Country</label>
                 <h4 id="c_country"></h4>
                 <label for="temp_units">Unit</label>
                 <select id="temp_unit" class="form-control-sm" style="width:100px;">
                       <option value="metric">C</option>
                       <option value="imperial">F</option>
                 <select><br><br><br><hr>
                 <input id="srh" class="form-control-sm" type="text" placeholder="City or Pincode...">
                 <button id="srh_btn" class="btn">🔍</button><hr>

</div>

<!-- Inside our second column of the grid there is present Weather data, Time and Hourly forecast --!>

<!-- Present weather and time --!>

<!-- Hourly weather forecast --!>

<label>Hourly weather forecast</label>
<div id="hourdata" class="d-flex p-3 flex-wrap text-white" style="background-color:rgba(3, 169, 244, 0.1)">

<!-- Present / 1st hour --!>
                       <div class="p-2" style="background-color:rgba(3, 169, 244, 1.0)">
                             <div id="des_1" title="">
                               <label>NOW</label><br>
                                <span id="ftemp_1"></span>
                                <img id="icon_1" src="" alt="icon"></img>
                             </div>
                       </div>

<!-- 2nd hour --!>
                       <div class="p-2">
                             <div id="des_2" title="">
                                   <span id="ftime_2"></span><br>
                                   <span id="ftemp_2"></span>
                                   <img id="icon_2" src="" alt="icon"></img>
                             </div>
                       </div>

<!-- 3rd hour --!>
                       <div class="p-2">
                             <div id="des_3" title="">
                                   <span id="ftime_3"></span><br>
                                   <span id="ftemp_3"></span>
                                   <img id="icon_3" src="" alt="icon"></img>
                             </div>
                       </div>
                 <!-- 4th hour --!>

<!-- 5th hour --!>
                       <div class="p-2">
                             <div id="des_5" title="">
                                   <span id="ftime_5"></span><br>
                                   <span id="ftemp_5"></span>
                                   <img id="icon_5" src="" alt="icon"></img>
                             </div>
                       </div>

<!-- 6th hour --!>
                       <div class="p-2">
                             <div id="des_6" title="">
                                   <span id="ftime_6"></span><br>
                                   <span id="ftemp_6"></span>
                                   <img id="icon_6" src="" alt="icon"></img>
                             </div>
                       </div>

<!-- 7th hour --!>
                       <div class="p-2">
                            <div id="des_7" title="">
                                   <span id="ftime_7"></span><br>
                                   <span id="ftemp_7"></span>
                                   <img id="icon_7" src="" alt="icon"></img>
                             </div>
                       </div>

<!-- 8th hour --!>
                       <div class="p-2">
                            <div id="des_8" title="">
                                    <span id="ftime_8"></span><br>
                                   <span id="ftemp_8"></span>
                                   <img id="icon_8" src="" alt="icon"></img>
                             </div>
                       </div>

<!-- 9th hour --!>
                       <div class="p-2">
                             <div id="des_9" title="">
                                   <span id="ftime_9"></span><br>
                                   <span id="ftemp_9"></span>
                                   <img id="icon_9" src="" alt="icon"></img>
                             </div>
                       </div>
               <!-- 10th hour --!>

<!-- 11th hour --!>
                       <div class="p-2">
                             <div id="des_11" title="">
                                   <span id="ftime_11"></span><br>
                                   <span id="ftemp_11"></span>
                                   <img id="icon_11" src="" alt="icon"></img>
                             </div>
                       </div>

<!-- 12th hour --!>
                       <div class="p-2">
                             <div id="des_12" title="">
                                   <span id="ftime_12"></span><br>
                                   <span id="ftemp_12"></span>
                                   <img id="icon_12" src="" alt="icon"></img>
                             </div>
                       </div>

<!-- 13th hour --!>
                       <div class="p-2">
                             <div id="des_13" title="">
                                   <span id="ftime_13"></span><br>
                                   <span id="ftemp_13"></span>
                                   <img id="icon_13" src="" alt="icon"></img>
                             </div>
                       </div>

<!-- 14th hour --!>
                       <div class="p-2">
                             <div id="des_14" title="">
                                    <span id="ftime_14"></span><br>
                                   <span id="ftemp_14"></span>
                                   <img id="icon_14" src="" alt="icon"></img>
                             </div>
                       </div>

</div>
</div>

<!-- 5 Days weather forecast --!>

        <div class="col-sm-3">
          <label>5 Days weather forecast</label>
          <div class="d-flex flex-column justify-content-around" style="background-color:rgba(3, 169, 244, 0.1);text-align:center;">

<!-- 1st Day --!>
            <div class="p-2">
              <div id="des_15" title="">
                <span id="fday_1"></span><br>
                <span id="ftemp_15"></span>
                <img id="icon_15" src="" alt="icon"></icon>
              </div>
            </div>

<!-- 2nd Day --!>
            <div class="p-2">
              <div id="des_16" title="">
                <span id="fday_2"></span><br>
                <span id="ftemp_16"></span>
                <img id="icon_16" src="" alt="icon"></icon>
              </div>
            </div>

<!-- 3rd Day --!>
            <div class="p-2">
              <div id="des_17" title="">
                <span id="fday_3"></span><br>
                <span id="ftemp_17"></span>
                <img id="icon_17" src="" alt="icon"></img>
              </div>
            </div>

<!-- 4th Day --!>
            <div class="p-2">
              <div id="des_18" title="">
                <span id="fday_4"></span><br>
                <span id="ftemp_18"></span>
                <img id="icon_18" src="" alt="icon"></img>
              </div>
            </div>

<!-- 5th Day --!>
            <div class="p-2">
              <div id="des_19" title="">
                <span id="fday_5"></span><br>
                <span id="ftemp_19"></span>
                <img id="icon_19" src="" alt="icon"></img>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

<!-- JavaScript/Jquery --!>

                //Default location
               w_url_1 = "http://api.openweathermap.org/data/2.5/weather?q=Mumbai&appid="+api_key+"&units=";
               w_url_2 = "https://api.openweathermap.org/data/2.5/onecall?lat=19.01&lon=72.85&appid="+api_key+"&units=";

                //search any location by its name or pin code
               $("#srh_btn").click(function(){
                     search = $("#srh").val();
                     w_url_1 = "http://api.openweathermap.org/data/2.5/weather?q="+search+"&appid="+api_key+"&units=";
                     if(search == ''){
                           alert("Empty");
                     }
                   });
        //Main function
        function w_info(){
             temp_u = $("#temp_unit").val();
             $.ajax({

                    //first API url
                   url: w_url_1 + temp_u,
                   dataType: "json",
                   success: function(data){

                           // Weather data from first API url
                                 lat = data.coord.lat;
                                 lon = data.coord.lon;
                                 c_temp = data.main.temp;
                                w_icon = data.weather[0].icon;
                                 w_des = data.weather[0].main;
                                 c_city = data.name;
                                 c_country = data.sys.country;

iconurl = "http://openweathermap.org/img/w/"+w_icon+".png //Changing temperature unit
if(temp_u == "metric"){

                                           t_u = " °C";
                                 }else{
                                         t_u = " °F"
                                 }

                         // set those weather data to the particular html element
                                 $("#c_temp").html(c_temp + t_u);
                                 $("#w_icon").attr('src', iconurl);
                                 $("#w_des").html(w_des);
                                 $("#c_city").html(c_city);
                                 $("#c_country").html(c_country);
                                 w_url_2 = "https://api.openweathermap.org/data/2.5/onecall?lat="+lat+"&lon="+lon+"&appid="+api_key+"&units=";
                   },
             });
             $.ajax({

// second API url
url: w_url_2 + temp_u,

dataType: "json",
success: function(data){

// Weather data from second API url
timezone = data.timezone;

                             // Date and Day based on the timezone and set them to the particular html element
                                     date = new Date();
                                     c_dt = date.toLocaleString("en-US", {hour: '2-digit', minute: '2-digit', day: '2-digit', month: '2-digit',
                   year: '2-digit', timeZone: timezone});
                                     weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
                                     n_date = new Date(c_dt);
                                     p_day = n_date.getDay();
                                     $("#c_dt").html(c_dt);
                                     $("#c_wday").html(weekday[p_day]);

icon_url = "http://openweathermap.org/img/w/";
// Get hourly forecast data form API and set them to the particualar html element

                           // set present or 1st hour forecast
                                     ftemp_1 = data.hourly[0].temp;
                                     des_1 = data.hourly[0].weather[0].description;
                                     icon_1 = icon_url + data.hourly[0].weather[0].icon + ".png";
                                     $("#des_1").attr('title', des_1);
                                     $("#ftemp_1").html(ftemp_1 + t_u);
                                     $("#icon_1").attr('src', icon_1);

                            // set 2nd hour forecast
                                     ftime_2 = new Date(data.hourly[1].dt * 1000).toLocaleString("en-US", {hour: '2-digit', minute: '2-digit', timeZone: timezone});
                                   ftemp_2 = data.hourly[1].temp;
                                     des_2 = data.hourly[1].weather[0].description;
                                   icon_2 = icon_url + data.hourly[1].weather[0].icon + ".png";
                                   $("#des_2").attr('title', des_2);
                                     $("#ftime_2").html(ftime_2);
                                     $("#ftemp_2").html(ftemp_2 + t_u);
                                     $("#icon_2").attr('src', icon_2);

                           // set 3rd hour forecast
                                     ftime_3 = new Date(data.hourly[2].dt * 1000).toLocaleString("en-US", {hour: '2-digit', minute: '2-digit', timeZone: timezone});
                                     ftemp_3 = data.hourly[2].temp;
                                     des_3 = data.hourly[2].weather[0].description;
                                     icon_3 = icon_url + data.hourly[2].weather[0].icon + ".png";
                                     $("#des_3").attr('title', des_3);
                                     $("#ftime_3").html(ftime_3);
                                     $("#ftemp_3").html(ftemp_3 + t_u);
                                     $("#icon_3").attr('src', icon_3);

                           // set 4th hour forecast
                                     ftime_4 = new Date(data.hourly[3].dt * 1000).toLocaleString("en-US", {hour: '2-digit', minute:'2-digit', timeZone: timezone});
                                     ftemp_4 = data.hourly[3].temp;
                                     des_4 = data.hourly[3].weather[0].description;
                                     icon_4 = icon_url + data.hourly[3].weather[0].icon + ".png";
                                     $("#des_4").attr('title', des_4);
                                     $("#ftime_4").html(ftime_4);
                                     $("#ftemp_4").html(ftemp_4 + t_u);
                                     $("#icon_4").attr('src', icon_4);

                           // set 5th hour forecast
                                     ftime_5 = new Date(data.hourly[4].dt * 1000).toLocaleString("en-US", {hour: '2-digit', minute:'2-digit', timeZone: timezone});
                                     ftemp_5 = data.hourly[4].temp;
                                     des_5 = data.hourly[4].weather[0].description;
                                     icon_5 = icon_url + data.hourly[4].weather[0].icon + ".png";
                                     $("#des_5").attr('title', des_5);
                                     $("#ftime_5").html(ftime_5);
                                     $("#ftemp_5").html(ftemp_5 + t_u);
                                     $("#icon_5").attr('src', icon_5);

                           // set 6th hour forecast
                                    ftime_6 = new Date(data.hourly[5].dt * 1000).toLocaleString("en-US", {hour: '2-digit', minute:'2-digit', timeZone: timezone});
                                     ftemp_6 = data.hourly[5].temp;
                                     des_6 = data.hourly[5].weather[0].description;
                                     icon_6 = icon_url + data.hourly[5].weather[0].icon + ".png";
                                     $("#des_6").attr('title', des_6);
                                     $("#ftime_6").html(ftime_6);
                                     $("#ftemp_6").html(ftemp_6 + t_u);
                                     $("#icon_6").attr('src', icon_6);

                           // set 7th hour forecast
                                     ftime_7 = new Date(data.hourly[6].dt * 1000).toLocaleString("en-US", {hour: '2-digit', minute:'2-digit', timeZone: timezone});
                                     ftemp_7 = data.hourly[6].temp;
                                     des_7 = data.hourly[6].weather[0].description;
                                     icon_7 = icon_url + data.hourly[6].weather[0].icon + ".png";
                                     $("#des_7").attr('title', des_7);
                                     $("#ftime_7").html(ftime_7);
                                     $("#ftemp_7").html(ftemp_7 + t_u);
                                     $("#icon_7").attr('src', icon_7);

                           // set 8th hour forecast
                                     ftime_8 = new Date(data.hourly[7].dt * 1000).toLocaleString("en-US", {hour: '2-digit', minute:'2-digit', timeZone: timezone});
                                     ftemp_8 = data.hourly[7].temp;
                                     des_8 = data.hourly[7].weather[0].description;
                                     icon_8 = icon_url + data.hourly[7].weather[0].icon + ".png";
                                     $("#des_8").attr('title', des_8);
                                     $("#ftime_8").html(ftime_8);
                                     $("#ftemp_8").html(ftemp_8 + t_u);
                                     $("#icon_8").attr('src', icon_8);

                           // set 9th hour forecast
                                     ftime_9 = new Date(data.hourly[8].dt * 1000).toLocaleString("en-US", {hour: '2-digit', minute:'2-digit', timeZone: timezone});
                                     ftemp_9 = data.hourly[8].temp;
                                     des_9 = data.hourly[8].weather[0].description;
                                     icon_9 = icon_url + data.hourly[8].weather[0].icon + ".png";
                                     $("#des_9").attr('title', des_9);
                                     $("#ftime_9").html(ftime_9);
                                     $("#ftemp_9").html(ftemp_9 + t_u);
                                     $("#icon_9").attr('src', icon_9);

                           // set 10th hour forecast
                                     ftime_10 = new Date(data.hourly[9].dt * 1000).toLocaleString("en-US", {hour: '2-digit', minute:'2-digit', timeZone: timezone});
                                     ftemp_10 = data.hourly[9].temp;
                                     des_10 = data.hourly[9].weather[0].description;
                                     icon_10 = icon_url + data.hourly[9].weather[0].icon + ".png";
                                     $("#des_10").attr('title', des_10);
                                     $("#ftime_10").html(ftime_10);
                                     $("#ftemp_10").html(ftemp_10 + t_u);
                                     $("#icon_10").attr('src', icon_10);

                           // set 11th hour forecast
                                     ftime_11 = new Date(data.hourly[10].dt * 1000).toLocaleString("en-US", {hour: '2-digit', minute:'2-digit', timeZone: timezone});
                                     ftemp_11 = data.hourly[10].temp;
                                     des_11 = data.hourly[10].weather[0].description;
                                     icon_11 = icon_url + data.hourly[10].weather[0].icon + ".png";
                                     $("#des_11").attr('title', des_11);
                                     $("#ftime_11").html(ftime_11);
                                     $("#ftemp_11").html(ftemp_11 + t_u);
                                     $("#icon_11").attr('src', icon_11);

                           // set 12th hour forecast
                                     ftime_12 = new Date(data.hourly[11].dt * 1000).toLocaleString("en-US", {hour: '2-digit', minute:'2-digit', timeZone: timezone});
                                    ftemp_12 = data.hourly[11].temp;
                                    des_12 = data.hourly[11].weather[0].description;
                                     icon_12 = icon_url + data.hourly[11].weather[0].icon + ".png";
                                     $("#des_12").attr('title', des_12);
                                     $("#ftime_12").html(ftime_12);
                                     $("#ftemp_12").html(ftemp_12 + t_u);
                                     $("#icon_12").attr('src', icon_12);

                           // set 13th hour forecast
                                     ftime_13 = new Date(data.hourly[12].dt * 1000).toLocaleString("en-US", {hour: '2-digit', minute:'2-digit', timeZone: timezone});
                                     ftemp_13 = data.hourly[12].temp;
                                     des_13 = data.hourly[12].weather[0].description;
                                     icon_13 = icon_url + data.hourly[12].weather[0].icon + ".png";
                                     $("#des_13").attr('title', des_13);
                                     $("#ftime_13").html(ftime_13);
                                     $("#ftemp_13").html(ftemp_13 + t_u);
                                     $("#icon_13").attr('src', icon_13);

                           // set 14th hour forecast
                                     ftime_14 = new Date(data.hourly[13].dt * 1000).toLocaleString("en-US", {hour: '2-digit', minute:'2-digit', timeZone: timezone});
                                     ftemp_14 = data.hourly[13].temp;
                                     des_14 = data.hourly[13].weather[0].description;
                                     icon_14 = icon_url + data.hourly[13].weather[0].icon + ".png";
                                     $("#des_14").attr('title', des_14);
                                     $("#ftime_14").html(ftime_14);
                                     $("#ftemp_14").html(ftemp_14 + t_u);
                                     $("#icon_14").attr('src', icon_14);
                   // Get 5 Days forecast data form API and set them to the particualar html element

                       // set 1st Day forecast
                                     fdate_1 = new Date(data.daily[1].dt * 1000).toLocaleString("en-US", {timeZone: timezone});
                                     fday_1 = new Date(fdate_1).getDay();
                                     ftemp_15 = data.daily[1].temp.min + " to " + data.daily[1].temp.max;
                                     des_15 = data.daily[1].weather[0].description;
                                     icon_15 = icon_url + data.daily[1].weather[0].icon + ".png";
                                     $("#des_15").attr('title', des_15);
                                     $("#fday_1").html(weekday[fday_1]);
                                     $("#ftemp_15").html(ftemp_15 + t_u);
                                     $("#icon_15").attr('src', icon_15);

                        // set 2nd Day forecast
                                    fdate_2 = new Date(data.daily[2].dt * 1000).toLocaleString("en-US", {timeZone: timezone});
                                    fday_2 = new Date(fdate_2).getDay();
                                    ftemp_16 = data.daily[2].temp.min + " to " + data.daily[2].temp.max;
                                     des_16 = data.daily[2].weather[0].description;
                                     icon_16 = icon_url + data.daily[2].weather[0].icon + ".png";
                                     $("#des_16").attr('title', des_16);
                                     $("#fday_2").html(weekday[fday_2]);
                                     $("#ftemp_16").html(ftemp_16 + t_u);
                                     $("#icon_16").attr('src', icon_16);

                        // set 3rd Day forecast
                                     fdate_3 = new Date(data.daily[3].dt * 1000).toLocaleString("en-US", {timeZone:timezone});
                                     fday_3 = new Date(fdate_3).getDay();
                                     ftemp_17 = data.daily[3].temp.min + " to " + data.daily[3].temp.max;
                                     des_17 = data.daily[3].weather[0].description;
                                     icon_17 = icon_url + data.daily[3].weather[0].icon + ".png";
                                     $("#des_17").attr('title', des_17);
                                     $("#fday_3").html(weekday[fday_3]);
                                     $("#ftemp_17").html(ftemp_17 + t_u);
                                     $("#icon_17").attr('src', icon_17);

                        // set 4th Day forecast
                                     fdate_4 = new Date(data.daily[4].dt * 1000).toLocaleString("en-US", {timeZone:timezone});
                                     fday_4 = new Date(fdate_4).getDay();

                                      ftemp_18 = data.daily[4].temp.min + " to " + data.daily[4].temp.max;
                                     des_18 = data.daily[4].weather[0].description;
                                     icon_18 = icon_url + data.daily[4].weather[0].icon + ".png";
                                     $("#des_18").attr('title', des_18);
                                     $("#fday_4").html(weekday[fday_4]);
                                     $("#ftemp_18").html(ftemp_18 + t_u);
                                     $("#icon_18").attr('src', icon_18);

// set 5th Day forecast

                                       fdate_5 = new Date(data.daily[5].dt * 1000).toLocaleString("en-US", {timeZone:timezone});
                                    fday_5 = new Date(fdate_5).getDay();
                                    ftemp_19 = data.daily[5].temp.min + " to " + data.daily[5].temp.max;
                                     des_19 = data.daily[5].weather[0].description;
                                     icon_19 = icon_url + data.daily[5].weather[0].icon + ".png";
                                     $("#des_19").attr('title', des_19);
                                     $("#fday_5").html(weekday[fday_5]);
                                     $("#ftemp_19").html(ftemp_19 + t_u);
                                     $("#icon_19").attr('src', icon_19);
              },
          });
        }

// set interval method will call the above w_info() every 1 second
        setInterval(function(){
          w_info();
        }, 1000);
      });
    </script>

</body>

</html>

Thanks for reading.
To support you can subscribe to my YouTube channel Clever Section.

Search This Blog

CleverPoint

How to build weather application using JavaScript|OpenWeatherMap API

Comments

Post a Comment

Popular Posts

How to create openweather apikey.