JSFiddle - React, Tailwind, and code Playground

by coryphoenixxx

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="script.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: 16px;
    height: 16px;
    background: #1d1d1d;
    margin: 2px;
    box-shadow: 0 0 2px black;
    transition: 1s ease;
}

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

JavaScript

const board = document.querySelector('#board')
const SQUARES_NUMBER = 500

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

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

    square.addEventListener('mouseleave', () =>
        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() {
    return randomColor = '#' + Math.floor(Math.random()*16777215).toString(16)
}