JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
</head>
<body>
<h1>JavaScript sample</h1>
<div id="square"></div>
<button type="button" id="clickMe">Click Me</button>
</body>
</html>
CSS
/*** JavaScript demonstration ***/
square {
width: 20em;
height: 20em;
border: 2px inset gray;
margin-bottom: 1em;
}
button {
padding: .5em 2em;
}
JavaScript
var square = document.getElementById("square"),
clickMe = document.getElementById('clickMe'); //Keeping it unobstrusive
function doDemo () {
var button = this;
square.style.backgroundColor = "#fa4";
button.setAttribute("disabled", "true");
setTimeout(clearDemo, 5000, button);
}
function clearDemo (button) {
var square = document.getElementById("square");
square.style.backgroundColor = "transparent";
button.removeAttribute("disabled");
}
clickMe.onclick = doDemo; //Onclick call. Pass no arguments.