Basic Color Matcher

by g30rg3

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<input id="input" type="text">
<button id="add">
  Add
</button>
<button id="clear">Clear</button>
<div id="cont">

</div>

CSS

div.swatch {
  height: 100px;
  width: 100px;
  float: left;
  margin: 5px;
}

JavaScript

$(function() {

  $('#add').on('click', function() {

    var color = $('#input').val();

    if (color.substring(0, 1) !== '#') {
      color = '#' + color;
    }

    var sw = $('<div />').addClass('swatch').css('background-color', color).text(color);

    $('#cont').prepend(sw);
    $('#input').val('');

  });

  $('#clear').on('click', function() {


    $('#cont').empty();

  });
  
  $('#cont').on('dblclick','.swatch', function(){
  		$(this).remove();
  });

});