JSFiddle - React, Tailwind, and code Playground

by Leoooo

HTML

<div >
  <p  style="text-align: center">
    hw1
    <br>
    <button id="control"  style="text-align: center">
      Light OFF
    </button>
    <button id="mode"  style="text-align: center">
      Simple Mode
    </button>
    <br>
    <button id="audio"  style="text-align: center">
      Music ON
    </button>
  </p>
  <!--
                  <div id="light" style="position:absolute;top:10vw;left:30vw;  
                background:pink;width:20px;height:20px;  
                border-radius:15px;z-index:1"></div>
                -->
  <img src="https://i.imgur.com/omX5Drl.png" style="position:absolute;top:15%;left:15%;width:70%;z-index:-1">
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</script>

JavaScript

var status = true;
var change=true;
var music=true;
$('#control').click ( function() {
	status = !status;
  if (status === true) 
  {
  	$('#control').text ('Light OFF');  
  }
  else 
  {
  	$('#control').text ('Light ON');  
  }
});
$('#audio').click ( function() {
	music = !music;
  if (music === true) 
  {
  	$('#audio').text ('Music OFF');  
  }
  else 
  {
  	$('#audio').text ('Music ON');  
  }
});
$('#mode').click ( function() {
	change = !change;
  if (change === false) 
  {
  	$('#mode').text ('Complex Mode');  
  }
  else 
  {
  	$('#mode').text ('Simple Mode');  
  }
});
class Light {
  
  constructor() {  
  	// create/append div dynamically
    // https://stackoverflow.com/questions/14004117/create-div-and-append-div-dynamically
    this.element = document.createElement ('div');
    //this = iDiv;
    this.element.id = 'light';
    // set element style attribute
    //https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
    this.element.style.cssText = "position:absolute;width:20px;height:20px;border-radius:15px;z-index:1"; 
	  this.element.style.top = '25vw';
    this.element.style.left = '40vw';
    // CSS color property: https://www.w3schools.com/cssref/pr_text_color.asp
    // hsl: https://www.w3schools.com/colors/colors_hsl.asp
    this.element.style.background = "hsl(89, 43%, 51%)";
    document.getElementsByTagName('body')[0].appendChild(this.element);
  }

	changeColor() 
  {
  	// https://stackoverflow.com/questions/45147661/javascript-recursion-within-a-class/45147713
    var self = this;
  	var hue = Math.random()*200;
    console.log(status);
    if(status==true)
    {
  	self.element.style.background = "hsl(" + hue + ", 43%, 51%)";  
    }
    else
    self.element.style.background = "hsl(" + hue + ", 13%, 11%)";
    setTimeout (function() { self.changeColor() } , 1000);
		// setTimeout ( self.changeColor , 1000);  // why this is not working ...
  }
}

////////////////////////////////
init();

function init() {
 var light...