LemonadeJS - Two-way binding JS library

State variable example with lemonadejs.

by joaovmvini

HTML

<html>
<link rel="stylesheet" href="https://jsuites.net/v3/jsuites.layout.css" type="text/css" />
<script src="https://lemonadejs.net/v1/lemonade.js"></script>
<div id='root'></div>
<script>
var colorChanger = (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 p10 m10" @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>
    `
    
    lemonade.blender(template,self,document.getElementById('root'));
});
 
colorChanger(document.getElementById('root'));
</script>