hoverboard

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>

* {

  box-sizing: border-box;

}


body {

  background-color: #111;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100vh;

  overflow: hidden;

  margin: 0;

}


.container {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  max-width: 400px;

}


.square {

  background-color: #1d1d1d;

  box-shadow: 0 0 2px #000;

  height: 16px;

  width: 16px;

  margin: 2px;

  transition: 2s ease;

}


.square:hover {

  transition-duration: 0s;

}


    </style>

    <title>Hoverboard</title>

  </head>

  <body>

    <div class="container" id="container"></div>

    <script>const container = document.getElementById('container')

      const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71']

      const SQUARES = 500

     

      for(let i = 0; i < SQUARES; i++) {

          const square = document.createElement('div')

          square.classList.add('square')

     

          square.addEventListener('mouseover', () => setColor(square))

     

          square.addEventListener('mouseout', () => removeColor(square))

     

          container.appendChild(square)

      }

     

      function setColor(element) {

         const color = getRandomColor()

         element.style.background = color

         element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`

      }

     

      function removeColor(element) {

         element.style.background = '#1d1d1d'

         element.style.boxShadow = '0 0 2px #000'

      }

     

      function getRandomColor() {

          return colors[Math.floor(Math.random() * colors.length)]

      }</script>

  </body>

</html>