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

See this example on jsfiddle.net

Source code

<html>
<link rel="stylesheet" href="https://jsuites.net/jsuites.layout.css" type="text/css" />
<script src="https://lemonadejs.com/v1/lemonade.js"></script>
<div id='root'></div>
<script>
var Color = (function(container) {
    var self = {};

    self.container = null;
    self.hexCode = '#';
    self.hexNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];

    self.getHex = function() {
        if(self.hexCode.length == 7) {
            self.hexCode = '#';
        }        
        for(var i = 0; i < 6; i ++) {
            var random = self.hexNumbers[Math.floor(Math.random() * self.hexNumbers.length)];
            self.hexCode += random;
        }
        self.container.style.background = self.hexCode;
    }

    var template = `
    <div>
        <div style="max-width: 400px;" class="column" @ref="self.container" @ready="self.getHex()">
            <span class="row center p10" style="font-size: 1.5em; display:block;">The Hex Color Code Is:</span>
            <span class="row center" style="font-size: 2em; display:block;">{{ self.hexCode }}</span>
            <br>
            <div class="row p10" style="justify-content: center;">
                <button onclick="self.getHex()" class="jbutton dark">Press Here To Change Color</button>
            </div>
        </div>
    </div>
    `
  return lemonade.element(template, self);
});
lemonade.render(Color, document.getElementById('root'));
</script>

Edit this page on GitHub