JSFiddle - React, Tailwind, and code Playground

by adeneo

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid" style="width:300px">
    <div class="row">
        <form role="form">
            <div class="form-group">
                <label for="fylke">Fylke</label>
                <input type="text" class="form-control" id="fylke" placeholder="Tast inn fylke" />
            </div>
            <div class="form-group">
                <label for="komm">Kommune</label>
                <input type="text" class="form-control" id="komm" placeholder="Tast inn kommune" />
            </div>
            <div class="form-group">
                <label for="sted">Sted</label>
                <input type="text" class="form-control" id="sted" placeholder="Tast inn sted" />
            </div>
            <button class="btn btn-primary">Søk <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
        </form>
    </div>
    <br />
    <div class="row">
        <div id="result"></div>
    </div>
</div>

JavaScript

$('form').on('submit', function(e) {
    e.preventDefault();
    
    var fylke = $('#fylke').val(),
        komm  = $('#komm').val(),
        sted  = $('#sted').val(),
        yrurl = 'http://www.yr.no/sted/Norge/'+fylke+'/'+komm+'/'+sted+'/varsel.xml',
        query = 'select * from xml where url="'+yrurl+'"',
        url   = 'https://query.yahooapis.com/v1/public/yql';
    
    $.getJSON(
        url, 
        {q : query, format : 'json', callback : ''}
    ).done(function(data) {
        var times = data.query.results.weatherdata.forecast.tabular.time,
            point = times.length ? times.shift() : null;
        
        if (point) {
            var s = point.symbol.numberEx
            s = ((+s < 10) ? '0' + s : s) + 'd';
            
            var symbol = 'http://symbol.yr.no/grafikk/sym/b48/'+ s +'.png',
                temp   = point.temperature.value + '°C';
            
            $('#result').html($('<img />', {src : symbol}))
                        .append($('<p />', {text : temp}));
        }
    });
});