JSFiddle - React, Tailwind, and code Playground

by diwanshi

HTML

<h1>JavaScript sample</h1>
<div id="square"></div>
<button>Click Me</button>

CSS

#square {
    width: 20em;
    height: 20em;
    border: 2px inset gray;
    margin-bottom: 1em;
}
button {
    padding: .5em 2em;
}

JavaScript

// JavaScript demonstration
var changeBg = function (event) {
    console.log("method called");
    var me = event.target
    ,   square = document.getElementById("square");
    square.style.backgroundColor = "#ffaa44";
    me.setAttribute("disabled", "disabled");
    setTimeout(clearDemo, 2000);
}

function clearDemo(button) {
    var square = document.getElementById("square");
    square.style.backgroundColor = "transparent";
    button.removeAttribute("disabled");
}

var button = document.querySelector("button");
button.addEventListener("click", changeBg);
console.log(button);