updaet demo

Author: sachinchoolur

demo/index.html

@@ -11,25 +11,47 @@
 
         <h1>Tiny-events.js</h1>
         <p>
-            TinyEvents is a tiny, framework-agnostic, event utility library for
-            modern browsers(IE 11+). Supports jQuery like syntax. Just 1 kb
-            gzipped.
+            TinyEvents is a tiny event utility library for modern browsers(IE
+            11+). Supports jQuery like syntax. Just 1 kb gzipped.
         </p>
+        <div class="color-code-wrap">
+            Color code <span id="color-code">#FFF</span>
+        </div>
         <script>
-            const getRandomColor = () =>
-                '#' + Math.floor(Math.random() * 16777215).toString(16);
+            tinyEvents('.change-bg').on(
+                'click.sample mouseover.sample',
+                function () {
+                    const color = getRandomColor();
+                    document.body.style.backgroundColor = color;
+                    triggerColorChange(color);
+                }
+            );
 
-            tinyEvents('.change-bg').on('click.sample mouseover.sample', () => {
-                document.body.style.backgroundColor = getRandomColor();
+            tinyEvents('.change-color').on('click.sample', function () {
+                const color = getRandomColor();
+                document.body.style.color = color;
+                triggerColorChange(color);
             });
 
-            tinyEvents('.change-color').on('click.sample', () => {
-                document.body.style.color = getRandomColor();
+            tinyEvents('.remove-btn').on('click', function () {
+                tinyEvents('.change-bg, .change-color').off('.sample');
             });
 
-            tinyEvents('.remove-btn').on('click', () => {
-                tinyEvents('.change-bg, .change-color').off('.sample');
+            tinyEvents('#color-code').on('color-change', function (event) {
+                const color = event.detail.color;
+                document.getElementById('color-code').innerHTML = color;
             });
+
+            function getRandomColor() {
+                return '#' + Math.floor(Math.random() * 16777215).toString(16);
+            }
+
+            function triggerColorChange(color) {
+                // Custom events demo
+                tinyEvents('#color-code').trigger('color-change', {
+                    color: color
+                });
+            }
         </script>
     </body>
 </html>