JSFiddle - React, Tailwind, and code Playground

by Xhogar

HTML

<div id="searcher">
    <div id="wrapper">
        <div id="header">
            <h1><a href="http://www.reddit.com/r/MortalKombat" target="_blank">/r/MortalKombat</a> Kombo/Strategy Search</h1> 
        </div>
        <div class="block" id="characters">
            <h2>Pick your character(s)</h2>
            <h3>Select two characters to search for the matchup.</h3>
            <div class="characters-roster">
                <a id="w-alien" rel="Alien Xenomorph"></a>
                <a id="w-jason" rel="Jason Voorhees Vorhees"></a>
                <a id="w-kunglao" rel="Kung+Lao Kunglao"></a>
                <a id="w-jax" rel="Jax Jackson"></a>
                <a id="w-sonya" rel="Sonya Blade"></a>
                <a id="w-kenshi" rel="Kenshi"></a>
                <a id="w-kitana" rel="Kitana"></a>
                <a id="w-scorpion" rel="Scorpion"></a>
                <a id="w-random" rel=""></a>
                <a id="w-subzero" rel="Sub+Zero Subzero Sub-Zero"></a>
                <a id="w-mileena" rel="Mileena"></a>
                <a id="w-takeda" rel="Takeda Takahashi"></a>
                <a id="w-cassie" rel="Cassie+Cage Cassie"></a>
                <a id="w-jaqui" rel="Jaqui Jacqui Jacqui+Briggs Jaqui+Briggs"></a>
                <a id="w-kungjin" rel="Kung+Jin Kungjin"></a>
                <a id="w-tanya" rel="Tanya"></a>
                <a id="w-boraicho" rel="Boraicho Bo+Rai+Cho Bo+raicho Bo+Raicho"></a>
                <div class="clear"></div>
                <a id="w-leatherface" rel="Leather+Face Leatherface"></a>
                <a id="w-predator" rel="Predator"></a>
                <a id="w-shinnok" rel="Shinnok"></a>
                <a id="w-kano" rel="Kano"></a>
                <a id="w-johnny" rel="Johnny Johnny+Cage"></a>
                <a id="w-erron" rel="Erron"></a>
                <a id="w-liu" rel="Liu Kang"></a>
                <a id="w-ermac" rel="Ermac"></a>
                <a id="w-kotal" rel="Kotal"></a>
                <a...

CSS

body {
    background:#000;
    color:#FFF;
    font-family:Arial;
    width:100%;
    height:100%;
    overflow:hidden;
}

#searcher,
#reddit {
    width:100%;
    height:100%;
}

#reddit {
    position:absolute;
    top:0;
    right:-100%;
}

#wrapper {
    max-width:900px;
    margin:20px auto 0;
    white-space:nowrap;
}

.clear {
    clear:both;
}

#header {
    background:url("http://b.thumbs.redditmedia.com/QykxmzTtlFw5k-Xzd9mtIAN8UM7c_uImVzeWqbHGHlc.png") no-repeat left top;
    height:160px;
    padding-left:150px;
    line-height:160px;
}
a {
    color:#ffb400;
    text-decoration:none;
}
h1 {
    font-size:32px;
}
h2 {
    margin:0;
    padding:0 0 5px;
    font-size:18px;
}

h3 {
   margin:0;
   padding:0 0 10px;
   font-size: 12px;
   font-weight:normal;
   color:#979289;
}


#macro-reset {
    clear:both;
    margin-top:20px;
    display:none;
}

#characters, #data-type {
    background:#191716;
    border:1px solid #2d2a28;
    padding:10px;
    margin-bottom:20px;
    min-height:60px;
}

.block {
    text-align:center;
}

#characters a {
    position:relative;
    background-image:url(http://a.thumbs.redditmedia.com/94F9qW5sdIW983VWlIMB2GIJn80qzxV4j_f3G0tn700.png);
    display:inline-block;
    width:45px;
    height:45px;
    margin:0 1px 2px 1px;
    opacity:.6;
    cursor:pointer;
}

#characters a.inactive,
#characters a.inactive:hover{
    opacity:.2;
    cursor:default;
}

#characters a:hover,
#characters a.selected{
 opacity:1
}

#characters a.selected:before{
    position:absolute;
    background:url(http://a.thumbs.redditmedia.com/lWIVnbXLAp2TGt_fdVBbE2fgSbUk9NfFfi-zjP2lKY0.png);
    content:"";
    display:block;
    top:-2px;
    left:-2px;
    width:51px;
    height:51px;
    z-index:1
}

#w-kunglao{background-position:0 0;}
#w-jax{background-position:-47px 0;}
#w-sonya{background-position:-94px 0;}
#w-kenshi{background-position:-141px 0;}
#w-kitana{background-position:-188px 0;}
#w-scorpion{background-position:-235px...

JavaScript

$(function () {

    $("#characters a:not(#w-random), #data-type a").on('click',function(e)
    {
        $(this).not('.inactive').toggleClass("selected");
        
        if ($("#characters a.selected").length >= 2) {
            $("#characters a:not(.selected)").addClass("inactive");
        } else {
            $("#characters a:not(.selected)").removeClass("inactive");
        }
        generateLink();
        e.preventDefault();
    });
    
    function generateLink()
    {
        // VARS
        href     = '';
        
        cArray   = [];
        chars    = '';
        
        fArray   = [];
        flairs   = '';
        
        // TARGET
        searchBtn = $("#search-submit a");
        
        // LOOP CHARACTERS
        $("#characters a").each(function (index, el) {
           
            if ($(el).hasClass("selected")) {
                
                str = $(el).attr("rel");
                strArray = str.split(' ');
                joined = 'title:(\'' + strArray.join('\' OR \'') + '\')';
                
                cArray.push(joined);
            }
            
        });
        
        if (cArray.length != 0) {
            chars = cArray.join(' AND ');
        }
               
        // LOOP FLAIRS
        $("#data-type a").each(function (index, el) {
                       
            if ($(el).hasClass("selected")) {
                fArray.push($(el).attr("rel"));
            }
            
        });
        
        if (fArray.length != 0) {
            flairs = '(\'' + fArray.join('\' OR \'') + '\')';
        }
        
        // SET HREF STRING
        if (chars != '' && flairs != '') {
            href = "http://www.reddit.com/r/MortalKombat/search?q="+chars+" AND flair:"+flairs+"&restrict_sr=on&sort=top&t=all#res-hide-options";
        }
                
        // SET HREF AND CLASS
        searchBtn.attr("href", href);
        if (!searchBtn.attr("href") == "") {
            searchBtn.addClass("active");
        }...