JSFiddle - React, Tailwind, and code Playground

by kasperfish

HTML

<div style="background:white;"  id="xbar"><input class=""  id="inputcolor" onblur="unfocusActions($(this))" onkeyup="handleColorSelection(this.value)" style="margin-left:8px;float:left;width:85px;height:70%;font-size:130%"/></div>

<div id="allcolors">
<div id="col_1" class="sel_cont sel_blue" style="cursor:pointer;float:left;" onclick="selectColor($(this))">blue</div>
<div id="col_2" class="sel_cont sel_black" style="cursor:pointer;float:left;" onclick="selectColor($(this))">black</div>
<div id="col_3" class="sel_cont sel_white" style="cursor:pointer;float:left;" onclick="selectColor($(this))">white</div>
<div id="col_4" class="sel_cont sel_brown" style="cursor:pointer;float:left;" onclick="selectColor($(this))">brown</div>
<div id="col_5" class="sel_cont sel_grey" style="cursor:pointer;float:left;" onclick="selectColor($(this))">grey</div>
<div id="col_6" class="sel_cont sel_beige" style="cursor:pointer;float:left;" onclick="selectColor($(this))">beige</div>
<div id="col_7" class="sel_cont sel_green" style="cursor:pointer;float:left;" onclick="selectColor($(this))">green</div>
<div id="col_8" class="sel_cont sel_red" style="cursor:pointer;float:left;" onclick="selectColor($(this))">red</div>
<div id="col_9" class="sel_cont sel_yellow" style="cursor:pointer;float:left;" onclick="selectColor($(this))">yellow</div>
<div id="col_10" class="sel_cont sel_pink" style="cursor:pointer;float:left;" onclick="selectColor($(this))">pink</div>
</div>

CSS

.sel_cont{
    display: none;
    padding: 7px;
    margin-left: 5px;
    margin-top: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) ;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) ;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) ;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
    
}
#xbar{
  
border-style: solid;
border-width: 1px;
border-color: #dedede;
height:46px;
width: 90%;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; 


}
.sel_black{background: black;color:white}
.sel_white{background: white;}
.sel_brown{background: #87421F;}
.sel_grey{background: grey;}
.sel_beige{background: #F5F1DE;}
.sel_green{background: green;}
.sel_red{background: red;}
.sel_yellow{background: yellow;}
.sel_pink{background: pink;}
.sel_blue{background: blue;}

JavaScript

var mycolorarray= [];

function handleColorSelection(value){
    //alert(value);
    value=value.replace(/\s+/g, ' ');
    //loop trough all colors in the container and get color name with html()
    $('#allcolors .sel_cont').each(function(i, obj) {
        colordiv=$(this);//this is the color div dom element
        colorname=colordiv.html();
        //compare the input value with the color name
        if(colorname.match("^"+value) && value!=''){
            colordiv.fadeIn();
            if(colorname==value){selectColor(colordiv);}
        }else{
            colordiv.fadeOut()
            }
    
    });
    
}
function selectColor(colordiv){
    //alert('select');
    colordiv.removeAttr('onclick').unbind('click').click(function(){deselectColor($(this));}).insertBefore($('#inputcolor'));
    $('#inputcolor').val('');
    $('#allcolors .sel_cont').fadeOut();
    mycolorarray.push(colordiv.attr('id').substr(4));
    $('#petcolors').val(JSON.stringify(mycolorarray));
    
}
function deselectColor(obj){
    //alert('deselect');
    obj.removeAttr('onclick').unbind('click').click(function(){selectColor($(this));}).hide().appendTo($('#allcolors'));
   
    //remove id from mycolorarray and update petcolors input with json
     index = mycolorarray.indexOf(obj.attr('id').substr(4));
     mycolorarray.splice(index, 1);
     if(mycolorarray.length >0){
     $('#petcolors').val(JSON.stringify(mycolorarray));
     }else{$('#petcolors').val('')}
}
function unfocusActions(obj){
    obj.val('');
   //handleColorSelection('');
    
}