JSFiddle - React, Tailwind, and code Playground

by santhosh lanka

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://rawgit.com/tjvantoll/jquery-ui-in-action-demos/master/chapter-11/js/underscore.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<form>
	<fieldset>
		<legend>Find a Flight</legend>

		<div>
			<label for="from-airport">From:</label>
			<input id="from-airport" autocomplete="off" required>
		</div>
		<div>
			<label for="to-airport">To:</label>
			<input id="to-airport" autocomplete="off" required>
		</div>
		<div>
			<label for="date">Date:</label>
			<input type="date" id="date" placeholder="yyyy-mm-dd" required>
		</div>
		<div>
			<label for="results">Max # of Results:</label>
			<input type="number" id="results" value="10" min="10" max="100" step="10">
		</div>
		<div>
			<label>Hops:</label>
			<div id="hops">
				<label for="hops-any">Any</label>
				<input type="radio" name="hops" id="hops-any" value="" checked>
				<label for="hops-nonstop">Nonstop Only</label>
				<input type="radio" name="hops" id="hops-nonstop" value="NONSTOP">
			</div>
		</div>
		
		<div>
			<button id="lookup" class="ui-priority-primary">Lookup</button>
		</div>
	</fieldset>
</form>

<div id="flights-container"></div>

CSS

body {
	font-family: Verdanda;
	margin: 10px;
}
* {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
form {
	float: left;
	min-width: 300px;
	width: 30%;
}
fieldset {
	padding: 0 1em 1em 1em;
}
legend {
	font-weight: bold;
	font-size: 1.1em;
}
fieldset > div > label {
	font-weight: bold;
	display: block;
	margin: 0.7em 0 0.3em 0;
}
input {
	padding: 0.5em;
	font-size: 1em;
	width: 100%;
}
.ui-spinner {
	width: 100%;
	padding: 0.2em;
}
select {
	width: 200px;
}
.ui-priority-primary {
	background: green;
	color: white;
	font-weight: normal;
}
#lookup {
	width: 100%;
	margin-top: 1em;
}

.ui-progressbar-value {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
.ui-autocomplete {
	max-height: 200px;
	overflow-x: hidden;
	overflow-y: auto;
}

#flights-container {
	float: left;
	margin-top: 0.6em;
	width: 70%;
	padding: 0 1em;
}
table {
	border-collapse: collapse;
	width: 100%;
}
tbody tr:nth-child(even) {
	background: #e7e7e7;
}
th {
	border-bottom: 2px solid #ddd;
}
th, td {
	text-align: left;
	padding: 0.8em;
}
td {
	border-top: 1px solid #ddd;
}
caption {
	font-size: 1.5em;
	font-weight: bold;
	padding-bottom: 0.5em;
}
caption span {
	font-size: 0.8em;
}

@media (max-width: 1025px) {
	#flights-container {
		width: calc( 100% - 320px );
	}
}
@media (max-width: 800px) {
	#flights-container, form {
		width: 100%;
	}
	input, .ui-spinner {
		width: 200px;
	}
	.ui-buttonset, .ui-selectmenu-button {
		font-size: 0.9em;
	}
	fieldset > div {
		float: left;
		margin-left: 0.5em;
		height: 70px;
		width: 210px;
	}
	fieldset > div:last-child {
		width: 100%;
	}
}

@media (max-width: 500px) {
	td, th {
		padding: 0.8em 0.1em;
	}
	#flights-container {
		padding: 0;
	}
	fieldset > div {
		width: 100%;
	}
}

JavaScript

var fromAirport = $( "#from-airport" ),
    toAirport = $( "#to-airport" ),
    date = $( "#date" ),
    hops = $( "#hops" ).buttonset(),
    results = $( "#results" ),
    orderBy = $( "#order-by" ).selectmenu(),
    processingDialog = $( "<div>" ).dialog({
        autoOpen: false,
        modal: true,
        title: "Looking up flights..."
    }),
    progressbar = $( "<div>" ).progressbar({ value: false });

function init() {
    processingDialog.append( progressbar );
    $( "#lookup" ).button();

    if ( !isTypeSupported( "date" ) ) {
        date.datepicker({ dateFormat: "yy-mm-dd" });
    }
    if ( !isTypeSupported( "number" ) ) {
        results.spinner();
    }

    lookupAirports().then(function( data ) {
        fromAirport.add( toAirport )
            .autocomplete({
                source: data.airports,
                minLength: 2
            });
    });

    setupValidation();
    setupEvents();
};

function isTypeSupported( type ) {
    var input = document.createElement( "input" );
    input.setAttribute( "type", type );
    return input.type === type;
};

function lookupAirports() {
    return $.getJSON( "https://rawgit.com/tjvantoll/jquery-ui-in-action-demos/master/chapter-11/json/airports.json" );
};

function lookupFlights() {
    var selectedDate = $.datepicker.parseDate( "yy-mm-dd", date.val() );
    return $.ajax({
        headers: { "X-Mashape-Authorization": "CJOMaM8W7JgCCyHV5LO7wGzaHBo1jNfR" },
        url: "https://flightlookup-timetable-rest.p.mashape.com/TimeTable/" +
            fromAirport.val() + "/" +
            toAirport.val() + "/" +
            $.datepicker.formatDate( "mm/dd/yy", selectedDate ) + "/",
        data: {
            Hops: hops.find( ":checked" ).val(),
            Count: results.val(),
            SortOrder: orderBy.val()
        }
    });
};

function parseFlights( data ) {
    var flights = []
    $( data ).find( "route" ).each(function() {
        var route = $( this ),
            flight = {
             ...