JSFiddle - React, Tailwind, and code Playground

by alirokni

HTML

<div id="weather"></div>
<img src="http://openweathermap.org/img/w/10d.png" id="imgIcon">
<pre>
http://openweathermap.org/current 
sunnyvale, ca
http://api.openweathermap.org/data/2.5/weather?id=5400075&APPID=1111111111&callback=weathermap
</pre>

JavaScript

`var weather = {
    "coord": {
        "lon": -122.04,
        "lat": 37.37
    },
    "sys": {
        "type": 1,
        "id": 480,
        "message": 0.1226,
        "country": "US",
        "sunrise": 1418829409,
        "sunset": 1418863946
    },
    "weather": [{
        "id": 500,
        "main": "Rain",
        "description": "light rain",
        "icon": "10d"
    }],
    "base": "cmc stations",
    "main": {
        "temp": 287.12,
        "pressure": 1018,
        "humidity": 63,
        "temp_min": 285.15,
        "temp_max": 289.15
    },
    "wind": {
        "speed": 2.6,
        "deg": 160
    },
    "clouds": {
        "all": 75
    },
    "dt": 1418851585,
    "id": 5400075,
    "name": "Sunnyvale",
    "cod": 200
};
$('#weather').before(weather.name  + 
" " + weather.weather[0].main);
$('#weather').after("the temp is " + (((weather.main.temp - 273.15)*9/5)+32).toFixed(2));
$('#weather').text( weather.weather[0].description);
$('#imgIcon').prop('href', 'http://openweathermap.org/img/w/'+weather.weather[0].icon+'png')