JSFiddle - React, Tailwind, and code Playground

by Anurag Udasi

HTML

<title>
    Weather report
</title>
<body>
    <p>hello world</p>
    Enter City: <input type="text" value="" id="cityval" size="40">
    <button id="gobtn">Go</button>
    <div id="mydiv" style="width:500px; height:250px; border:1px solid red">
        <div style="display:inline">
        <div style="float:left"> Temperature:</div> <div id="mytemperature" style="float:left;width:250px; height: 20px; border:1px solid blue; margin-left: 15px"></div>
            <div style="clear:both"></div>
        </div>
        <br/>
        <div style="display:inline">
        <div style="float:left"> Humidity:</div> <div id="myhumidity" style="float:left;width:50px; height: 20px; border:1px solid blue; margin-left: 38px"></div>
            <div style="clear:both"></div>
        </div>
        <br/>
        <div style="display:inline">
        <div style="float:left"> Weather:</div> <div id="myweather" style="float:left;width:50px; height: 20px; border:1px solid blue; margin-left: 40px"></div>
            <div style="clear:both"></div>
        </div>
    </div>
</body>

JavaScript

function getweatherdata(){
//alert('hello world');
    var city = document.getElementById('cityval').value;
    var url = "http://api.openweathermap.org/data/2.5/weather?q=city"
    alert('city='+city); 
    if(city != ""){
    var url2 = url.replace("city", city);
        //alert(url2);
    }
var myxmlhttp;
    if(window.XMLHttpRequest)  {
    myxmlhttp = new XMLHttpRequest();
    }  
    else{
    myxmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
    }
    myxmlhttp.onreadystatechange=function()
  {
  if (myxmlhttp.readyState==4 && myxmlhttp.status==200)
    {
    //document.getElementById("mydiv").innerHTML=myxmlhttp.responseText;
        var responseval = myxmlhttp.responseText;
        var obj1 = JSON.parse(responseval);
        //alert(responseval);
        var temperature = obj1.main.temp;
            temperature = temperature - 273;
            temperature = temperature + ""+ "Celsius";
        var humidity = obj1.main.humidity;
        var weather = obj1.main.humidity;
        document.getElementById("mytemperature").innerHTML = temperature;
        document.getElementById("myhumidity").innerHTML = humidity;
        //alert(temperature);
    }
}
myxmlhttp.open("GET",url2,true);
myxmlhttp.send();
}
document.getElementById('gobtn').onclick = getweatherdata;