JSFiddle - React, Tailwind, and code Playground

by JInks Peng

HTML

<div id='one'></div>
 <button>click</button>

CSS

#one{
  width: 300px;
  height: 300px;
  border:1px solid black;
}

JavaScript

var fadingObject = {
  yellowColor: function(val) {
    var r = 'ff', g = 'ff';
    var b = val.toString(16);
    var newval = '#' + r +g + b;
    return newval;
  },
  fade: function(id,start,finish) {
    this.count = this.start = start;
    this.finish = finish;
    this.id = id;
    this.countDown = function() {
      this.count += 30;
      if(this.count >= this.finish) {
        document.getElementById(this.id).style.background = 'transparent';
        this.countDown = null;
        return;
      }
      document.getElementById(this.id).style.backgroundColor = this.yellowColor(this.count);
      setTimeout(this.countDown.bind(this),100);
    }
  }
 }

window.onload = function() {
  var btn = document.querySelector('button');
  btn.onclick = function() {
    fadingObject.fade('one',0,300);
    fadingObject.countDown();
  }
}