JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<link rel="stylesheet" href="http://dev.iceburg.net/jquery/jqModal/jqModal.css">
<script src="http://dev.iceburg.net/jquery/jqModal/jqModal.js"></script>
<!-- Begin Channel Finder Markup -->
<div id="channel-finder">
    <div class="channel-finder-header">
        <img class="channel-finder-image" src="http://i.imgur.com/DVqxD.png"><span>Channel Finder</span>
    </div>
    
    <input id="channel-finder-input" type="text" placeholder="Enter your zip code"/>
    <button id="channel-finder-button">FIND!</button>
</div> <!-- End Channel Finder Markup -->


<!-- Begin jqModal Markup -->
<div id="channel-finder-results-container" class="jqModal">
    <div class="channel-finder-header">
        <img class="channel-finder-image" src="http://i.imgur.com/DVqxD.png"><span>Channel Finder</span>
        <div id="channel-finder-results-close-button">X</div>
    </div>
    <div class="channel-finder-results-header">
        <span>truTV IS AVAILABLE IN</span> <input type="text"> <button id='change-zip-code'>CHANGE zip code</button>
    </div>
    <div class="scroll-wrap">
        <ul id="channel-finder-results">
        </ul>
    </div>
</div> <!-- End jqModal Markup -->

CSS

body { 
    background-color: #D66900;
}

#channel-finder {
    width: 336px;
    height: 96px;
    background-color: #231f20;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ie-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

.channel-finder-header {
    padding-top: 12px;
    color: #91d02a;
    font: 20px Arial;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 2px solid #ccc;
}

.channel-finder-header span {
    padding-left: 8px;
}

.channel-finder-image {
    padding-left: 17px;
}

#channel-finder-input {
    margin: 12px 2px 12px 17px;
    width: 219px;
    height: 25px;  
}

#channel-finder-button {
    width: 73px;
    height: 30px;
    position: relative;
    display: inline-block;     
    padding: 5px 10px; 
    font: 14px Arial;
    font-weight: bold;
    background-color: #81b62a;    
    color: #fff;
    text-transform: uppercase;    
    text-decoration: none;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);    
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ie-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);    
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    -ie-box-shadow: 0 1px 3px rgba(0,0,0,0.6);    
    -o-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);    

    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.25);
    cursor: pointer;    
}

#channel-finder-button:hover { background-color: #749a02; }
#channel-finder-button:active { top: 1px; }

.jqModal {
    font: 12px Verdana;
        
    display: none;
    position: fixed;
    top: 17%;
    left: 50%;
    
    margin-left: -300px;
    
    width: 555px;
    height: 445px;
    border: 5px solid #81b62a;
    
    background-color: #231f20;
    color: #fff;
    padding: 17px;
}

#channel-finder-results-container {
    overflow: hidden;
}

#channel-finder-results-container...

JavaScript

var testdata, errordata;

(function ($) {
    var $input = $('#channel-finder-input'),
        $button = $('#channel-finder-button'),
        $change_button = $('#change-zip-code'),
        $close_button = $('#channel-finder-results-close-button'),
        $results_container = $('#channel-finder-results-container'),
        $results_input = $('.channel-finder-results-header input').eq(0),
        $results_list = $('#channel-finder-results'),
        list_item_template = '<li><span class="provider">{provider}</span><span class="channel">Channel {channel}</span></li>',
        endpoint = '//www.trutv.com/channels?zipcode=',
        cache = [];
    

    // Tiny templating
    function t (s, d){
        for(var p in d) {
            s = s.replace(new RegExp('{'+p+'}','g'), d[p]);   
        }
        
        return s;
    }
    
    
    // Request channel info from local endpoint
    function getChannelInfo (zipcode, callback) {
        var url = '/echo/json/';//endpoint + zipcode;
        
        if (cache[zipcode]) {
            callback(cache[zipcode]);
            return;
        }
        
        $.ajax(url, {            
            type: 'POST',//'GET'
            data: {
                json: JSON.stringify(testdata),
                delay: 1.5
            },
            dataType: 'json',
            success: function (results) {
                cache[zipcode] = results;
                callback(results);
            },
            error: function (results) {
                callback(results);
                
            }
        });
    }
    
    
    // Update list with results
    function displayChannelInfo (results) {
        var error = (results.error || false);
        if (error) {
            $('#channel-finder-results').append('<li>' + error + '</li>').hide().fadeIn();
            return;
        }
        
        var html_output = '',
            active_providers = results.providers.active,
            inactive_providers =...