Cacher is the code snippet organizer for pro developers

* {
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    outline: none;
}
body {
    margin: 0;
    padding: 0;
}
.wrapper {
    width: 21em;
    margin: 10em auto;
    text-align: center;
    padding-bottom: 1em;
    background: #FFF;
    border: 1px solid #C7C7C7;
}
.wrapper h3 {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    color: #E74C3C;
    margin: 0;
    padding: 0.5em 0;
    text-transform: uppercase;
}
span.info {
  font-size: 0.7em;
  color: #3498DB;
}
span.divider {
  display: block;
  background: #C7C7C7;
  width: 100%;
  height: 1px;
  margin: 0.2em;
}
#captcha {
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
#captcha li {
    display: inline-block;
    margin: 0.5em;
    padding: 0.5em 1em;
    border: 1px solid #ECF0F1;
}
form ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
form ul li {
    display: inline-block;
    margin: 0;
    padding: 0;
}
form ul li input {
    width: 3em;
    height: 3em;
    border: 1px solid #C7C7C7;
    padding: 0.2em;
    text-align: center;
    color: rgba(0, 0, 0, 0);
    background: #FFF;
}
form ul li button,
#result a {
    display: inline-block;
    border: 1px solid #C7C7C7;
    min-width: 3em;
    height: 3em;
    padding: 0.2em;
    margin: 1em auto;
    text-align: center;
    color: #3498DB;
    background: #FFF;
    text-decoration: none;
    -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
}
#result a {
    height: auto;
    width: auto;
    padding: 1em;
    text-transform: uppercase;
}
form ul li button:hover,
#result a:hover {
    text-decoration: none;
    border: 1px solid #3498DB;
    color: #C7C7C7;
    -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
}
.error {
    color: #E74C3C;
}
.success {
    color: #3498DB;
}
/* Modal */

.lightModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}
.lightModal .lightModal-inner {
    display: block;
    width: 75%;
    height: 75%;
    margin: 10em auto;
    padding: 0;
}
.lightModal .lightModal-inner .lightModal-title {
    font-family: sans-serif;
    font-weight: 300;
    color: #777;
    border-bottom: 1px solid #EFEFEF;
}
.lightModal .lightModal-inner .lightModal-close {
    position: absolute;
    top: 0.2em;
    right: 0.2em;
    background: #FFF;
    border: none;
    font-size: 3em;
    line-height: 1;
    font-family: serif;
    color: #464646;
}
.lightModal .lightModal-inner .lightModal-close:hover {
    color: #f55;
}
.lightModal .lightModal-inner .lightModal-image {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-height: 95%;
}
.show {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

var colors = ['#1ABC9C', '#34495E', '#E67E22', '#2ECC71', '#9B59B6', '#F1C4F', '#E74C3C', '#95A5A6', '#3498DB', '#000'],

    captcha = document.getElementById('captcha'),
    items = captcha.querySelectorAll('.captcha_color'),
    elements = Array.prototype.slice.call(items),

    form = document.getElementById('lock'),
    arr = Array.prototype.slice.call(form.querySelectorAll('input[type="number"]')),

    result = document.getElementById('result'),
    modal = document.querySelector('.lightModal'),
    modalTitle = document.querySelector('.lightModal-title'),
    modalClose = document.querySelector('.lightModal-close');


window.addEventListener('load', init);


function init() {

    Array.prototype.forEach.call(elements, function(obj, index) {
        var rand = colors[Math.floor(Math.random() * colors.length)];
        obj.style.background = rand;

        if (obj.style.background === '') {
            obj.style.background = colors[0];
        }
    });

    Array.prototype.forEach.call(arr, function(obj, index) {

        _change(obj);


        form.addEventListener('submit', function(e) {
            e.preventDefault();

            var captcha_colors = rgbToHex(elements[index]).toUpperCase(),
                array_of_colors = colors[obj.value];
                                         
				console.log(captcha_colors +' === '+ array_of_colors);
                                         
            if (captcha_colors === array_of_colors) {
                return _success(obj);
            } else {
                return _error();
            }

        });


    });



    // close modal
    modalClose.addEventListener('click', function(e) {
        e.preventDefault();
        modal.classList.remove('show');
        modalTitle.textContent = '';
        result.textContent = '';
    });

}

function _success(el) {
    modal.classList.add('show');
    modalTitle.textContent = 'Good Job ! get your Freebie';
    result.innerHTML = '<a href="#" onclick="return freebie()">Download Freebie</a>';
}

function _error() {
    modal.classList.add('show');
    modalTitle.textContent = 'Error';
    result.innerHTML = '<p class="error">You need get Good Password to show link.</p>';
}

function _change(el) {
    return el.addEventListener('change', function() {
        this.style.background = _swicth(this.value);
    }, false);
}


function _swicth(condition) {
    var stuff = {
        0: function() {
            return colors[0];
        },
        1: function() {
            return colors[1];
        },
        2: function() {
            return colors[2];
        },
        3: function() {
            return colors[3];
        },
        4: function() {
            return colors[4];
        },
        5: function() {
            return colors[5];
        },
        6: function() {
            return colors[6];
        },
        7: function() {
            return colors[7];
        },
        8: function() {
            return colors[8];
        },
        9: function() {
            return colors[9];
        }

    };
    if (typeof stuff[condition] !== 'function') {
        return '#ffffff';
    }
    return stuff[condition]();
}


// http://stackoverflow.com/questions/11670019/does-object-style-color-only-return-rgb
function rgbToHex(el) {
    var hexChars = '0123456789ABCDEF';
    var rgb = getComputedStyle(el).backgroundColor.match(/\d+/g);
    var r = parseInt(rgb[0]).toString(16);
    var g = parseInt(rgb[1]).toString(16);
    var b = parseInt(rgb[2]).toString(16);
    var hex = '#' + r + g + b;
    return hex;
}

// use php for this
function freebie(){
  return window.open("https://www.dropbox.com/s/hdgzg0k91lixa38/thephotografer.zip?dl=0");
}

<div class="wrapper">

    <h3>Resolve the Captcha color <br />
    <small>And get the freebie</small></h3>
  
    
    <span class="info">You can use keys and tab. (0 - 9)</span>
  
  <span class="divider"></span>
    
    <ul id="captcha">
        <li class="captcha_color">&nbsp;</li>
        <li class="captcha_color">&nbsp;</li>
        <li class="captcha_color">&nbsp;</li>
        <li class="captcha_color">&nbsp;</li>
        <li class="captcha_color">&nbsp;</li>
    </ul>

    <form id="lock">
        <ul>
            <li>
                <input type="number" min="0" max="9" />
            </li>
            <li>
                <input type="number" min="0" max="9" />
            </li>
            <li>
                <input type="number" min="0" max="9" />
            </li>
            <li>
                <input type="number" min="0" max="9" />
            </li>
            <li>
                <input type="number" min="0" max="9" />
            </li>
            <li>
                <button type="submit" id="unlock" ><i class="fa fa-lock"></i>
                </button>
            </li>
        </ul>
      
    </form>

    <!-- lightModal -->
    <div class="lightModal">
        <div class="lightModal-inner">
            <button class="lightModal-close" role="button">&times;</button>
            <h3 class="lightModal-title"></h3>
            <div id="result"></div>
        </div>
    </div>
    <!-- / lightModal -->
</div>