JSFiddle - React, Tailwind, and code Playground

by tranxuanthang

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<div id="container">
  <div id="box-1">
  </div>

  <div id="box-2">
  </div>

  <div id="box-3">
  </div>
</div>

CSS

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 6px;
  height: 100vh;
}

#box-1, #box-2, #box-3 {
  height: 200px;
  background-color: black;
}

JavaScript

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

document.getElementById("box-1").addEventListener("mousemove", event => {
  document.getElementById("box-1").style.background = getRandomColor();
})

document.getElementById("box-2").addEventListener("mousemove", _.throttle(event => {
  document.getElementById("box-2").style.background = getRandomColor();
}, 300))

document.getElementById("box-3").addEventListener("mousemove", _.debounce(event => {
  document.getElementById("box-3").style.background = getRandomColor();
}, 200))