JSFiddle - React, Tailwind, and code Playground

by sutherland

HTML

<form><input type="text" id="sktspts-input"><input type="button" value="search" id="sktspts-search"></form>
<div id="data">
    <div id="results">
        Enter a location and click submit!
    </div> 
</div>

CSS

body {
    font-family: helvetica, arial, sans-serif;
}

form {
    margin-bottom: 10px;
}

ol {
    list-style-type: decimal;
    padding-left: 25px; 
}

JavaScript

$('#sktspts-search').click(function() {
    $('#results').replaceWith(
    $('<div/>', {
        'id': 'results',
        html: 'Loading...'
    }));
    var location = document.getElementById('sktspts-input');
    var url = 'http://beta.sktspts.com/spots/json/' + location.value;
    $.getJSON(url, function(data) {
        if (typeof data.error != 'undefined') {
            $('#results').replaceWith(
            $('<div/>', {
                'id': 'results',
                html: data.error
            }));
        } else {
            var items = [];

            $.each(data.results, function(key, val) {
                var distance = Math.round(val[0]['distance'] * 10) / 10;
                items.push('<li id="' + key + '">' + val.spots.name + ' - ' + distance + '</li>');
            });

            $('#results').replaceWith(
            $('<ol/>', {
                'id': 'results',
                html: items.join('')
            }));
        }
    });
});