JSFiddle - React, Tailwind, and code Playground

by Anurag Udasi

HTML

<!-- Kailash -->
<div style="float:right;margin-right:100px">
    <input type="text" id="city"/> <input type="button" id="go_button" value="Go" /> <input type="button" value="Clear" id="clear_button"/>
</div>

<div style="width:200px;padding:30px;" id="res">
    <div><label>Name </label><span id="city_name"></span></div>
    <div><label>Temprature </label><span id="city_temp"></span></div>
    
</div>

CSS

label{
    
width:200px;
    height:30px;
    
    
    
    
}
span{
 display:inline;   
}
}

JavaScript

document.getElementById("go_button").onclick = function()
{
     var xmlhttp=new XMLHttpRequest();
var city=document.getElementById('city').value;     
    xmlhttp.open('GET','http://api.openweathermap.org/data/2.5/weather?q='+city +',In');
    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var response = JSON.parse(xmlhttp.responseText);
        console.log(response.name);
            document.getElementById('city_name').innerHTML=response.name;
            document.getElementById('city_temp').innerHTML=response.main.temp;
            document.getElementById('res').style.display="";  
    }
    }
    xmlhttp.send();
};

document.getElementById("clear_button").onclick = function()
{
  document.getElementById('res').style.display="none";  
};