JSFiddle - React, Tailwind, and code Playground

by Anurag Udasi

HTML

<!-- SUBIN -->
<div id="weatherApp">
<form name="getWeatherForm" id="getWeatherForm" onsubmit="return false">
    <label>City:<input type="text" name="cityName" id="cityName" value="" placeholder="Type city name here" class="input"/></label>
    <input type="button" id="btn_getWeather" value="Go"/>
</form>
    <div id="weatherInfo">
    <div class="w-sec sts">
        <img id="sunnyIcon" src="http://icons.iconarchive.com/icons/icons-land/weather/256/Sunny-icon.png"/>
        <img id="cloudyIcon" src="http://icon-icons.com/icons2/8/22804_Snow_Occasional.png"/>
    </div>
    <div class="w-sec temp">
        28
    </div>
    <div class="w-sec unit">
        <span class="dgr">o
        </span>
        <span class="symb">C
        </span>
    </div>
    <div class="w-sec hum">Humidity:<span class="hum-val"></span>%</div>
</div>
</div>

CSS

#weatherApp{margin:40px auto;width:400px;
    padding:10px;
    min-height:200px;
    color:#555555;
}
#weatherInfo{display:none;margin-top:10px;border:1px solid #eaeaea;border-radius:5px;overflow:auto;}
.input{margin:0 10px;padding:2px;}
.w-sec{float:left;}
.w-sec.temp{font-size:32px;
background-image:url('https://www.vectorimages.org/09/0920100604102002851_031550156cb65df48d6602.jpg');
}
.w-sec.unit{font-size:16px;}
.dgr{margin-top:-5px}
.w-sec.unit span{float:left}
#weatherInfo img{height:48px;width:48px}
.w-sts.sunny img.cloudy{display:none}
.w-sts.cloudy img.sunny{display:none}
.w-sec.hum{font-size:24px;color:#666666;margin-left:10px;}

JavaScript

document.getElementById("btn_getWeather").onclick = function() {
    app.getWeather(this.form.cityName);
};

document.getElementById("cityName").onkeyup = function() {
    var city = this.value;
     if(city.trim().length < 1){  app.hideWeatherInfo() }
};

var app = (function(){
    return {
        getWeather: function(input){
            var city = input.value;            
            if(city.length <3){  return false; }
            var url = "http://api.openweathermap.org/data/2.5/weather?q="+city;
            $.ajax( {url:url,success:function(result){
                
                var tgtCt = $("#weatherInfo");
                var temp = (parseFloat(result.main.temp) - 273.15).toFixed(2);
                //temp = ((temp - 32)*5/9 ).toFixed(2);
                var humidity = result.main.humidity;
                var clouds = result.weather[0].main;
                tgtCt.show();
                if(clouds == "Clouds"){
                    $("#sunnyIcon",tgtCt).hide();
                    $("#cloudyIcon",tgtCt).show();
                }else{
                    $("#sunnyIcon").show();
                    $("#cloudyIcon").hide();
                }
                $(".w-sec.temp",tgtCt).html(temp);
                $(".w-sec .hum-val",tgtCt).html(humidity);
            }
                    
            } );            
        },
        hideWeatherInfo: function(){
            $("#weatherInfo").hide();
        }
    }
})();