color-board

Color board where you can draw smth

by Ravshanbek778

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: 16px;
  height: 16px;
  background: #1d1d1d;
  margin: 2px;
  box-shadow: 0 0 2px #000;
  transition: 2s ease;
}
.square:hover {
  transition-duration: 0s;
}

JavaScript

const board = document.querySelector('#board'),
      colors = ['red', 'blue', 'green', 'yellow', 'white'],
      SQUARES_NUMBER = 500;

    document.querySelector('body').addEventListener('contextmenu', (e) => false)

    for (let i = 0; i < SQUARES_NUMBER; i++) {
        const square = document.createElement('div')
        square.classList.add('square')
        square.addEventListener('click', () => setColor(square))
        square.addEventListener('dblclick', () => removeColor(square))
        board.append(square);
}

    const setColor = (element) => {
        const color = getRandomColor()
        element.style.backgroundColor = color;
        element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`;
    }
    const removeColor = (element) => {
        element.style.backgroundColor = '#1d1d1d';
        element.style.boxShadow = `0 0 2px #000`;
    }
    const getRandomColor = () => {
      const index = Math.floor(Math.random() * colors.length)
        return colors[index]
}