JSFiddle - React, Tailwind, and code Playground

by Tolibjon Tolibov

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
  <title>Доска | Проект 4</title>
</head>
<body>
<div class="container" id="board"></div>
<script src="app.js"></script>
</body>
</html>

CSS

* {
  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;
  justify-content: center;
  align-items:center;
  flex-wrap: wrap;
  max-width: 400px;
}

.square {
  width: 10px;
  height: 10px;
  background-color: #1d1d1d;
  margin: 2px;
  box-shadow: 0 0 2px #000;
  transition: 1s ease;
}

.square:hover{
  transition-duration: 0s;
}

JavaScript

const board =document.querySelector('#board');
const colors=createColors(10);
console.log(colors);
const SQUARES_NUMBER = 840;

for (let i=0; i<SQUARES_NUMBER; i++){
  const square = document.createElement('div');
  square.classList.add('square');

  square.addEventListener('mouseover', ()=>setColor(square))
  square.addEventListener('mouseout', ()=>removeColor(square))
  board.append(square)
}

function setColor(element){
  const color = getRandomColor();
  element.style.backgroundColor=color
  element.style.boxShadow=`0 0 2px ${color}, 0 0 10px ${color}`
}

function removeColor(element){
  element.style.backgroundColor='#1d1d1d'
  element.style.boxShadow='0 0 2px #000'
}

function getRandomColor(){
  const index = Math.floor(Math.random()*colors.length);
  return colors[index]
}

function createColors(count){
  let colors=[];
  for (let i=0; i<count; i++){
    let r = Math.floor(Math.random()*255);
    let g = Math.floor(Math.random()*255);
    let b = Math.floor(Math.random()*255);
    colors.push(`rgb(${r}, ${g}, ${b})`);
  }
  return colors;
}