JSFiddle - React, Tailwind, and code Playground

by Arthur Lutkevichus

HTML

<button type="button" id="button">Click me</button>
<strong id="counter" data-times="0"></strong>

CSS

#button {
  color: #333;
  background: #fff;
  box-shadow: 0 0 5px #777;
  border-radius: 3px;
  border: #777;
}

JavaScript

var timeout;
var counter = document.getElementById("counter");
  
document.getElementById("button").onclick = function() {
	clearTimeout(timeout);
	this.style.color = "#fff";
	this.style.background = "#12AA00";
  this.innerText = "Clicked";
  
  var clickedTimes = (parseInt(counter.dataset.times) + 1);
  counter.innerText = "Clicked " + clickedTimes + " time" + (clickedTimes > 1 ? "s" : ""); 
  counter.dataset.times = clickedTimes;
  
  timeout = setTimeout(function() {
    this.style.color = "#333";
    this.style.background = "#fff";
  this.innerText = "Click me";
  }.bind(this), 1000)
}