ColorPicker

In this example below you will see how to do a ColorPicker with some HTML / CSS and Javascript

Super simple random color picker.

Thumbnail
This awesome code was written by gbabula, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright gbabula ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>ColorPicker</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section 
    class="delay-animation fade-in"
    data-color-picker>
</section>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/gbabula/colorpicker-tLCdj */
@-webkit-keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@-moz-keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@-o-keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}


body {
    background: rgb(210, 247, 178);
    margin: 0;
    padding: 4em;
    position: relative;
    -webkit-transition: .6s;
    -moz-transition: .6s;
    transition: .6s;
}

body,
[data-color-picker] li {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
}

.fade-in {
    -webkit-animation: fade-in 1s ease-in both;
    -moz-animation: fade-in 1s ease-in both;
    -o-animation: fade-in 1s ease-in both;
    animation: fade-in 1s ease-in both;
}

.delay-animation {
    -webkit-animation-delay: .5s;
    -moz-animation-delay: .5s;
    -o-animation-delay: .5s;
    animation-delay: .5s;
} 


[data-color-picker] {
    background: #333;
    bottom: 0;
    box-shadow: 0 0 1.3em rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: block;
    height: 16em;
    margin: 0 -8em -14em 0;
    opacity: 0;
    position: absolute;
    right: 50%;
    width: 16em;
}

[data-color-picker] ul {
    border: none;
    font-size: 0;
    margin: 0;
    padding: 0;
}

[data-color-picker] li {
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    height: 4em;
    margin: 0;
    padding: 0;
    position: relative;
    width: 4em;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    transition: .4s;
    z-index: 1;
}

[data-color-picker] li:hover {
    -webkit-transform: scale(1.4) translate(1em);
    -moz-transform: scale(1.4) translate(1em);
    transform: scale(1.4) translate(1em);
    z-index: 2;
}

/*
[data-color-picker] li:active ~ li {
    opacity: 0.2;
}
*/

[data-color-picker] li:hover:before {
    /*
    -webkit-animation: fade-in .5s ease-in both;
    -moz-animation: fade-in .5s ease-in both;
    -o-animation: fade-in .5s ease-in both;
    animation: fade-in .5s ease-in both;
    */
    background: rgba(0, 0, 0, 0.6);
    content: attr(title);
    color: #f3f3f3;
    height: 1em;
    opacity: 0;
    padding: .5em 0;
    position: absolute;
    right: -2em;
    top: 0;
    text-align: center;
    text-shadow: 0 0 .5em rgba(0, 0, 0, 0.6);
    width: 100%;
}


/*Downloaded from https://www.codeseek.co/gbabula/colorpicker-tLCdj */
/*

    ColorPicker
    
      Super simple random color picker.
      By Greg Babula

*/

(function () {

    'use strict';

    var $document = document;
    var $body = $document.body;

    var ColorPicker = {
        limit: 23,
        el: $document.querySelector('[data-color-picker]'),
        wrap: $document.createElement('ul'),
        /*
         *
         * @method createItem
         *
         */
        createItem: function createItem(index) {

            var baseColor = '#000000';
            var colorPickerItem = $document.createElement('li');
            var randomHex = baseColor.replace(/0/g, function () {
                return (~~(Math.random() * 16)).toString(16);
            });

            colorPickerItem.classList.add('js-color-picker-i-' + index);
            colorPickerItem.setAttribute('data-color', randomHex);
            colorPickerItem.setAttribute('title', randomHex);
            colorPickerItem.style.backgroundColor = randomHex;

            this.wrap.appendChild(colorPickerItem);
        },

        /*
         *
         * @method createSet
         * @returns {Object} this
         *
         */
        createSet: function createSet() {

            for (var i = 0; i <= this.limit; i += 1) {
                this.createItem(i);
            }

            this.el.appendChild(this.wrap);

            return this;
        },

        /*
         *
         * @method addEvents
         * @returns {Object} this
         *
         */
        addEvents: function addEvents() {

            this.el.addEventListener('click', function (e) {

                var color = void 0;

                if (e.target && e.target.nodeName === 'LI') {
                    color = e.target.getAttribute('data-color');
                    $body.style.backgroundColor = color;
                }
            }, false);

            return this;
        },

        /*
         *
         * @method init
         *
         */
        init: function init() {

            this.createSet().addEvents();
        }
    };

    /*
     *
     * @function colorPickerFactory
     *
     */
    function colorPickerFactory() {

        return _.assign(_.create(ColorPicker), {
            limit: 15
        });
    }

    var colorPickerSet = colorPickerFactory();

    colorPickerSet.init();
})();

Comments