HTML редактор

<!doctype html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transition Events - Example 01</title>
  <style>
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

body {
      margin: 0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      background-color: #fff;
      -webkit-text-size-adjust: 100%;
      -webkit-tap-highlight-color: transparent;
    }

.box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 100px;
      margin: 20px;
      color: black;
      font-size: 18px;
      font-family: monospace;
      background-color: #f2c2b4;
      cursor: pointer;
      transition: background-color 0.5s ease-in-out 0.1s;
    }

.box:hover {
      outline: 7px solid #fff9c4;
    }
  </style>
</head>

<body>
  <p style="text-align: center;">Кликните на элемент:</p>
  <div class="box" style="margin-left: auto; margin-right: auto;">#f2c2b4</div>

constructor(selector) {
        this.#el = document.querySelector(selector);
        this.#addEventListeners();
      }

#addEventListeners() {
        this.#el.addEventListener('click', (e) => {
          if (this.#isTransition) {
            console.log('CSS-переход ещë не закончился', new Date().toLocaleTimeString());
            return;
          }
          this.#isTransition = true;
          const hex = `#${Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')}`;
          e.target.style.backgroundColor = hex;
          const [r, g, b] = e.target.style.backgroundColor.replace(/[^\d,]/g, '').split(',');
          const brightness = Math.floor((r * 299 + g * 587 + b * 114) / 1000);
          e.target.style.color = brightness < 128 ? 'white' : 'black';
          e.target.textContent = hex;
        });
        this.#el.addEventListener('transitionrun', () => {
          console.log('CSS-переход создан', new Date().toLocaleTimeString());
        });
        this.#el.addEventListener('transitionstart', () => {
          console.log('CSS-переход начался', new Date().toLocaleTimeString());
        });
        this.#el.addEventListener('transitionend', () => {
          this.#isTransition = false;
          console.log('CSS-переход закончился', new Date().toLocaleTimeString());
        });
      }
    }

const colorBox = new ColorBox('.box');
  </script>
</body>

</html>