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.net/lemonade.js"></script> <div id='root'></div> <script> function ColorChanger() { // Initializing self const self = this; 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. return `<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>`; } 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; }