Filter

by shurikation

HTML

<div class="buttons">
  <button class="btn-1 red" data-filter=".red">Красный</button>
  <button class="btn-2 green" data-filter=".green">Зеленый</button>
  <button class="btn-3 blue" data-filter=".blue">Синий</button>
</div>
<div class="board">
  <div class="item red">Red</div>
  <div class="item blue">Blue</div>
  <div class="item red">Red</div>
  <div class="item red">Red</div>
  <div class="item green">Green</div>
  <div class="item green">Green</div>
  <div class="item blue">Blue</div>
  <div class="item green">Green</div>
  <div class="item red">Red</div>
</div>

CSS

button {
  color: #ffffff;
}

body {
  background-color: grey;
}

.board {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  margin-top: 50px;
}

.item {
  width: 100px;
  height: 100px;
  border: 2px solid white;
  color: white;
}

.red {
  background-color: darkred;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

JavaScript

const $redBtn = document.querySelector