August 19, 2019

Live Weather App Using jQuery with Open Weather API

jQuery Plugin For Displaying Real Time Weather Conditions

The weather app is used to get the current weather information like temperature, humidity, wind speed, wind direction, pressure in the current city or place. In this article, we are going to see how to create a live weather app using jQuery with Open Weather API. Also, you can get weather forecast information for any city in a country and if you like to get a number of the day’s weather forecast information, that also possible with date wise. Using jQuery here we going to display the current weather of any city and country using (Open Weather API).

Live OpenWeatherMap API

OpenWeatherMap API provides weather information for overall all cities around the world. Using this API you can integrate easily on your website and show the weather information. One of the best thing in OpenWeatherMap API is that it also gives free access to get weather information and that are limited to 60 visits per minute to the API. Once you reached above 60 visits per minute you need to pay for the API. Here you having the price information OpenWeatherMap API Pricing .

Note: You need to create an account on OpenWeatherMap API and using that API key you need to replace with the existing API.

index.html

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

<head>
    <meta charset="UTF-8">
    <title> Live Weather App Using jQuery (Open Weather API) </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>

<body class="bg-gray-100 leading-normal my-10" style="background:#edf2f6;">

    <div class="flex mb-4">
        <div class="w-full text-center">
            <h1 class="text-4xl">Live Weather App Using jQuery (Open Weather API)</h1>
        </div>
    </div>

    <div class="flex items-center justify-center p-8">

        <div class="flex mb-4">
            <div class="w-full text-center">

                <div class="max-w-sm bg-white shadow-lg rounded p-3">
                    <div class="timeBlock border border-gray-100 my-2 p-2">
                        <h4>Date and Time</h4>
                        <span id="date"></span> | <span id="time"></span>
                    </div>
                    <form>
                        <div class="max-w-sm my-3">
                            <input id="location" class="w-full h-12 px-3 rounded mb-2 focus:outline-none focus:shadow-outline text-md shadow-md" type="search" placeholder="Search your location...">

                            <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Search Location</button>
                        </div>
                    </form>

                    <div class="w-full text-center">
                        <div class="justify-center"><img src="img/weather.png" width="170px" style="margin: 0 auto;" /></div>
                        <span id="temperature" class="text-6xl"></span><span id="unit">°C</span>
                        <div id="status" class="text-2xl"></div>
                    </div>

                    <table class="w-full text-center border-collapse">
                        <!--Border collapse doesn't work on this site yet but it's available in newer tailwind versions -->
                        <tbody>
                            <tr class="hover:bg-grey-lighter">
                                <td class="py-4 px-6 border-b border-grey-light"><img width="30px" src="img/wind.png" style="margin: 0 auto;" /><span class="windSpeed"></span> <span class="windSpeedUnit">km/h</span></td>
                                <td class="py-4 px-6 border-b border-grey-light"><img width="30px" src="img/pressure.png" style="margin: 0 auto;" /><span class="pressure"></span></td>
                            </tr>
                            <tr class="hover:bg-grey-lighter">
                                <td class="py-4 px-6 border-b border-grey-light"><img width="30px" src="img/windsock.png" style="margin: 0 auto;" /><span class="windDirection"></span></td>
                                <td class="py-4 px-6 border-b border-grey-light"><img width="30px" src="img/humidity.png" style="margin: 0 auto;" /><span class="humidity"></span></td>
                            </tr>
                        </tbody>
                    </table>

                    <div class="w-full text-center my-3">
                        <input id="celsius_F" type="checkbox" class="checkbox">
                        <label for="celsius_F" class="text-1xl">Celsius</label>
                    </div>

                </div>

            </div>
        </div>

    </div>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
    <script src="script.js"></script>

</body>

</html>

<!DOCTYPE html>

<head>

<title> Live Weather App Using jQuery (Open Weather API) </title>

</head>

<h1 class="text-4xl">Live Weather App Using jQuery (Open Weather API)</h1>

</div>

</div>

<form>

<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Search Location</button>

</div>

</form>

</div>

<tbody>

</tr>

</tr>

</tbody>

</table>

<label for="celsius_F" class="text-1xl">Celsius</label>

</div>

</body>

</html>

script.js

var unit = "C";

$(".checkbox").prop("checked", "checked");

function getLocation() {
    $.get("https://ipapi.co/json", function(data) {
        getWeather(data.city);
    });
}

function getWeather(city) {
    var api = "https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?q=";
    var units = "&units=metric";
    var appid = "&APPID=061f24cf3cde2f60644a8240302983f2";
    var $http = api + city + units + appid;
    $.getJSON($http, function(data) {
        console.log(data);
        temp = data.main.temp.toFixed(0);
        status = data.weather[0].description;
        iconId = data.weather[0].id;
        pressure = data.main.pressure ? Math.round(data.main.pressure) : "N/A ";
        humidity = data.main.humidity ? Math.round(data.main.humidity) : "N/A ";
        windSpeed = data.wind.speed ? (data.wind.speed * 3.6).toFixed(0) : "N/A ";
        windDirection = data.wind.deg ? data.wind.deg.toFixed(0) : "N/A ";
        city = data.name;
        country = data.sys.country;

        var hours = new Date().getHours();
        var dayOrNight = hours > 6 && hours < 22 ? "day" : "night";

        inputTextValue = city + ", " + country;
        $("#location").val(inputTextValue);
        $(".forecast-status")
            .find(".wi")
            .addClass("wi-owm-" + dayOrNight + "-" + iconId);
        $("#temperature").text(temp);
        $("#status").text(status[0].toUpperCase() + status.slice(1));
        $(".pressure").text(pressure + " hPa");
        $(".humidity").text(humidity + " %");
        $(".windSpeed").text(windSpeed);
        $(".windDirection").text(
            windDirection + "deg " + degToCompass(windDirection)
        );
        $(".wi-wind").addClass("towards-" + windDirection + "-deg");
        changeBackground(iconId);
    });
}

function degToCompass(num) {
    var val = Math.floor(num / 22.5 + 0.5);
    var arr = [
        "(N)",
        "(NNE)",
        "(NE)",
        "(ENE)",
        "(E)",
        "(ESE)",
        "(SE)",
        "(SSE)",
        "(S)",
        "(SSW)",
        "(SW)",
        "(WSW)",
        "(W)",
        "(WNW)",
        "(NW)",
        "(NNW)"
    ];
    return arr[val % 16] || "";
}

function celsius_F() {
    if (unit == "F") {
        unit = "C";
        windSpeedUnit = "km/h";
        temp = Math.round((temp - 32) * 5 / 9 * 10 / 10);
        windSpeed = Math.round(windSpeed * 1.609344 * 10 / 10);
    } else if (unit == "C") {
        unit = "F";
        windSpeedUnit = "mph";
        temp = Math.round((temp * (9 / 5) + 32) * 10 / 10);
        windSpeed = Math.round(windSpeed * 0.62137119223733 * 10 / 10);
    }
    $("#temperature").text(temp);
    $("#unit").text("°" + unit);
    $(".windSpeed").text(windSpeed);
    $(".windSpeedUnit").text(windSpeedUnit);
}

function getDate() {
    var d = new Date();
    var date = d.toLocaleDateString();
    $("#date").html(date);
}

function getClock() {
    var d = new Date(),
        h = d.getHours(),
        m = d.getMinutes(),
        s = d.getSeconds();
    h = checkTime(h);
    m = checkTime(m);
    s = checkTime(s);
    $("#time").text(h + ":" + m + ":" + s);
    var t = setTimeout(getClock, 500);
}

function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

getDate();
getClock();
getLocation();

window.onkeyup = keyup;
var inputTextValue;

function keyup(e) {
    //setting your input text to the global Javascript Variable for every key press
    inputTextValue = e.target.value;
    if (e.keyCode == 13) {
        console.log(inputTextValue);
        if (~inputTextValue.indexOf(",")) inputTextValue = "";
        getWeather(inputTextValue);
    }
}

$(document).ready(function() {
    $("#location").on("click", function() {
        $(this).val("");
        inputTextValue = "";
    });

    $('form').submit(function() {
        if (~inputTextValue.indexOf(",")) inputTextValue = "";
        getWeather(inputTextValue);
        return false;
    });

    $("#celsius_F").on("change", function() {
        celsius_F();
    });
    $(".beforeText, .forecast-temp").on("click", function() {
        $(".checkbox").prop("checked", function(idx, oldProp) {
            return !oldProp;
        });
        celsius_F();
    });
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

var unit = "C";

$(".checkbox").prop("checked", "checked");

function getLocation() {

$.get("https://ipapi.co/json", function(data) {

getWeather(data.city);

});

}

function getWeather(city) {

var api = "https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?q=";

var units = "&units=metric";

var appid = "&APPID=061f24cf3cde2f60644a8240302983f2";

var $http = api + city + units + appid;

$.getJSON($http, function(data) {

console.log(data);

temp = data.main.temp.toFixed(0);

status = data.weather[0].description;

iconId = data.weather[0].id;

pressure = data.main.pressure ? Math.round(data.main.pressure) : "N/A ";

humidity = data.main.humidity ? Math.round(data.main.humidity) : "N/A ";

windSpeed = data.wind.speed ? (data.wind.speed * 3.6).toFixed(0) : "N/A ";

windDirection = data.wind.deg ? data.wind.deg.toFixed(0) : "N/A ";

city = data.name;

country = data.sys.country;

var hours = new Date().getHours();

var dayOrNight = hours > 6 && hours < 22 ? "day" : "night";

inputTextValue = city + ", " + country;

$("#location").val(inputTextValue);

$(".forecast-status")

.find(".wi")

.addClass("wi-owm-" + dayOrNight + "-" + iconId);

$("#temperature").text(temp);

$("#status").text(status[0].toUpperCase() + status.slice(1));

$(".pressure").text(pressure + " hPa");

$(".humidity").text(humidity + " %");

$(".windSpeed").text(windSpeed);

$(".windDirection").text(

windDirection + "deg " + degToCompass(windDirection)

);

$(".wi-wind").addClass("towards-" + windDirection + "-deg");

changeBackground(iconId);

});

}

function degToCompass(num) {

var val = Math.floor(num / 22.5 + 0.5);

var arr = [

"(N)",

"(NNE)",

"(NE)",

"(ENE)",

"(E)",

"(ESE)",

"(SE)",

"(SSE)",

"(S)",

"(SSW)",

"(SW)",

"(WSW)",

"(W)",

"(WNW)",

"(NW)",

"(NNW)"

];

return arr[val % 16] || "";

}

function celsius_F() {

if (unit == "F") {

unit = "C";

windSpeedUnit = "km/h";

temp = Math.round((temp - 32) * 5 / 9 * 10 / 10);

windSpeed = Math.round(windSpeed * 1.609344 * 10 / 10);

} else if (unit == "C") {

unit = "F";

windSpeedUnit = "mph";

temp = Math.round((temp * (9 / 5) + 32) * 10 / 10);

windSpeed = Math.round(windSpeed * 0.62137119223733 * 10 / 10);

}

$("#temperature").text(temp);

$("#unit").text("°" + unit);

$(".windSpeed").text(windSpeed);

$(".windSpeedUnit").text(windSpeedUnit);

}

function getDate() {

var d = new Date();

var date = d.toLocaleDateString();

$("#date").html(date);

}

function getClock() {

var d = new Date(),

h = d.getHours(),

m = d.getMinutes(),

s = d.getSeconds();

h = checkTime(h);

m = checkTime(m);

s = checkTime(s);

$("#time").text(h + ":" + m + ":" + s);

var t = setTimeout(getClock, 500);

}

function checkTime(i) {

if (i < 10) {

i = "0" + i;

}

return i;

}

getDate();

getClock();

getLocation();

window.onkeyup = keyup;

var inputTextValue;

function keyup(e) {

//setting your input text to the global Javascript Variable for every key press

inputTextValue = e.target.value;

if (e.keyCode == 13) {

console.log(inputTextValue);

if (~inputTextValue.indexOf(",")) inputTextValue = "";

getWeather(inputTextValue);

}

$(document).ready(function() {

$("#location").on("click", function() {

$(this).val("");

inputTextValue = "";

});

$('form').submit(function() {

if (~inputTextValue.indexOf(",")) inputTextValue = "";

getWeather(inputTextValue);

return false;

});

$("#celsius_F").on("change", function() {

celsius_F();

});

$(".beforeText, .forecast-temp").on("click", function() {

$(".checkbox").prop("checked", function(idx, oldProp) {

return !oldProp;

});

celsius_F();

});

Preview & Download

Live Weather App Weather API

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts. If you have any questions let me drop an email with the article name to the following email id: [email protected]

Live Weather App Using jQuery with Open Weather API

Share:

Live OpenWeatherMap API

index.html

script.js

Preview & Download

Mraj

Don't miss on latest updates