/*Стандартный 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;
flex-wrap: wrap;
justify-content: center;
align-items: center;
max-width: 400px;
}
.square {
width: 16px;
height: 16px;
background-color: #1d1d1d;
margin: 2px;
box-shadow: 0 0 2px #000;
transition: 2s ease;
}
.square:hover {
transition-duration: 0s;
}
// Стандартный JavaScript
const board = document.querySelector('#board');
const SQUARES_NUMBER = 500;
const colors = [
'green',
'gray',
'white',
'blue',
]
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 #1d1d1d`;
}
function getRandomColor() {
const index = Math.floor(Math.random() * colors.length);
return colors[index];
}