JSFiddle - React, Tailwind, and code Playground

by Jagi

HTML

<button id="button">CLICK HERE</button>
<div id="event"></div>

CSS

#button {
  display: block;
  width: 100%;
  padding: 2em;
  font-size: 30px;
  font-weight: bold;
  background-color: red;
  color: white;
  border: 0 none;
  outline: 0 none;
}

#event {
  display: block;
  width: 100%;
  padding: 2em;
  font-size: 30px;
  font-weight: bold;
  background-color: yellow;
  color: black;
}

JavaScript

const button = document.getElementById("button");
const event = document.getElementById("event");

button.addEventListener("click", () => {
	event.innerText = "CLICK";
});

button.addEventListener("dblclick", () => {
	event.innerText = "DOUBLE CLICK";
});