My colors

Gallery of my favorite colors

HTML

<div ID="wrapper">
    <div ID="addColor">
        <input type="text" ID="hex">
        <div ID="color">Your color</div>
        <button ID="add">Add color</button>
    <div CLASS="clear"></div> <!-- Clear float -->
    </div>
    
    <div ID="wrapGallery">
        <h1>My Color Gallery</h1>
        <ul ID="gallery"></ul>
    </div>
</div>

CSS

* { padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
body {  background: #5cf; }
.clear { clear: both }
#wrapper {
    background: rgba(0,0,0,.1);
    padding: 20px;
}
/* ADDING COLOR */
#addColor {}
#addColor input#hex {}
#addColor div#color {
    width: 100px;
    height: 20px;
    border: 1px solid rgba(0,0,0,.4);
}
#addColor button#add {
    
}
/* ADDING COLOR END */

/* GALLERY */
#wrapGallery {}
#wrapGallery h1 { font: 22px/30px arial; color: maroon; }
#wrapGallery ul#gallery { list-style: none; }
#wrapGallery ul#gallery li {
    width: 100px;
    height: 25px;
    border: 1px solid rgba(0,0,0,.4);
    margin: 5px;
}
/* GALLERY END */

JavaScript

$(function() {

    $('#addColor')//float left with some margin
        .children().not('#add, .clear').css({
        'float':'left',
        'margin-right': '5px'
        });
    
    //Showing color on keyup
    $('#hex').keyup(function() {
       var hexCode = $(this).val();
       $('#color').css('background', hexCode);
       
        if ( hexCode !== '') {
            $('#color').text('');
        }else{
            $('#color').text('Your color');
        }
        
    });
    
    //Adding colors
    $gallery = $('#gallery');
    
    $('#add').click(function() {
        var storedHex = $('#hex').val();
      //$('#gallery')
          //.append('<li></li>')
         // .css('background', storedHex);  
      //Change the order of operations.
      $("<li></li>").css('background', storedHex).appendTo("#gallery");
    });
    
});