Products
Star

Color Changer

Color Changer generates a hexadecimal code that corresponds to a color. In this example you will learn how to use LemonadeJS to create a hexadecimal color generator!

A working example

Pass the mouse over the cards to change their colors

See this example on codesandbox

Source code

<html>
<script src="https://lemonadejs.com/v2/lemonade.js"></script>
<div id='root'></div>
<script>
var ColorChanger = function() {
    // Initializing self
    var self = {}

    var rand = function() {
        return parseInt(Math.random() * 255);
    }

    self.applyColor = function(element) {
        // Get a RANDOM RGB number
        var color = [ rand(), rand(), rand() ];
        // Set background of the DOM
        element.style.backgroundColor = 'rgb(' + color + ')';
        // Set text of the DOM
        element.innerText = color;
    }

    // Color changer template.
    var template = `
        <div class="grid">
            <div onmousemove="self.applyColor(this)">Hover here</div>
            <div onmousemove="self.applyColor(this)">Hover here</div>
            <div onmousemove="self.applyColor(this)">Hover here</div>
        </div>`;

    return lemonade.element(template, self);
}

lemonade.render(ColorChanger, document.getElementById('root'));
</script>
</html>

CSS of this section

If you wish to use this example, please copy this CSS to your project.

.grid {
    display: flex;
    flex-direction: row;
    width: 300px;
}
.grid > div {
    width: 100px;
    height: 100px;
    margin: 2px;
    color: #fff;
    text-align: center;
    transition: 0.5s;
    background-color: #cecece;
}

Edit this page on GitHub