Смена цвета таблицы, при нажатии на кнопку

Question

При нажатии на одну из кнопок на левой панели, должна происходить плавная смена цвета таблицы на цвет кнопки, и в левой панели должен выдвигаться вперед элемент, обозначающий активный цвет.

Как реализовать изменение цвета таблицы ? Код на codepen.io

.page {
  min-width: 320px;
  max-width: 480px;
  max-height: 800px;
  min-height: 455px;
  margin: 0 auto;
}

.content {
  background-color: #edd3ea;
  padding-top: 36px;
  padding-right: 24px;
  padding-bottom: 5.2%;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.bar__item {
  width: 52px;
  height: 70px;
  transition: width .5s;
}

.bar__item_color_blue {
  background-color: #4a48ba;
  transition: .5s;
}

.bar__item_color_blue:hover {
  width: 70px;
  cursor: pointer;
}

.bar__item_color_red {
  background-color: #f3535d;
}

.bar__item_color_red:hover {
  width: 70px;
  cursor: pointer;
}

.bar__item_color_green {
  background-color: #0e9d59;
}

.bar__item_color_green:hover {
  width: 70px;
  cursor: pointer;
}

.bar__item_color_orange {
  background-color: #ff961c;
}

.bar__item_color_orange:hover {
  width: 70px;
  cursor: pointer;
}

.table-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(81.25px, 130px));
  grid-template-rows: repeat(4, minmax(81.25px, 130px));
  align-items: stretch;
  justify-items: stretch;
}

.table-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4a48ba;
  border: 2px solid #edd3ea;
  box-sizing: border-box;
  color: #ffff80;
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 48px;
  line-height: 56px;
}

<div class="page">
  <main class="content">
    <section class="bar">
      <div class="bar__item  bar__item_color_blue"></div>
      <div class="bar__item bar__item_color_red"></div>
      <div class="bar__item bar__item_color_green"></div>
      <div class="bar__item bar__item_color_orange"></div>
    </section>
    <section class="table-grid">
      <div class="table-grid__item">1</div>
      <div class="table-grid__item">2</div>
      <div class="table-grid__item">3</div>
      <div class="table-grid__item">4</div>
      <div class="table-grid__item">5</div>
      <div class="table-grid__item">6</div>
      <div class="table-grid__item">7</div>
      <div class="table-grid__item">8</div>
    </section>
  </main>
</div>

Answer 1

Додумаете))

class TableShit {
  constructor(tableSelector) {
    this.table = document.querySelector(tableSelector)
    this.bar = this.table.querySelector('.bar')
    this.grid = this.table.querySelector('.table-grid')
  }
  
  toggleActive(target) {
  
    this.bar.querySelectorAll('.bar__item_active').forEach(item => {
      item.classList.remove('bar__item_active')
    })
  
    const btn = target;
    btn.classList.add('bar__item_active')
  }
  
  setColor(color) {
     this.grid.style.background = color
  }
  
  
  toggle(event) {
    const target = event.target;
    const targetColor = target.dataset.color
    if(!target.classList.contains('bar__item')) return false
    
    this.toggleActive(target)
    this.setColor(targetColor)
    
  }
  
  init() {
     this.bar.addEventListener('click', (event) => this.toggle(event))
  }
}

const myTable = new TableShit('.table')
myTable.init()

.page {
  min-width: 320px;
  max-width: 480px;
  max-height: 800px;
  min-height: 455px;
  margin: 0 auto;
}
.content {
  background-color: #edd3ea;
  padding-top: 36px;
  padding-right: 24px;
  padding-bottom: 5.2%;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.bar__item {
  width: 52px;
  height: 70px;
  transition: width .5s;
}

.bar__item:hover {
    width: 70px;
    cursor: pointer;
}

.bar__item_active {
  width: 70px;
  cursor: pointer;
}

.bar__item_color_blue {
  background-color: #4a48ba;
  transition: .5s;
}


.bar__item_color_red {
  background-color: #f3535d;
}


.bar__item_color_green {
  background-color: #0e9d59;
}


.bar__item_color_orange {
  background-color: #ff961c;
}


.table-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(81.25px, 130px));
  grid-template-rows: repeat(4, minmax(81.25px, 130px));
  align-items: stretch;
  justify-items: stretch;
  background: silver;
}

.table-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #edd3ea;
  box-sizing: border-box;
  color: #ffff80;
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 48px;
  line-height: 56px;
}

<div class="page">
        <main class="content table">
        <section class="bar">
            <div class="bar__item bar__item_color_blue" data-color="blue"></div>
            <div class="bar__item bar__item_color_red" data-color="red"></div>
            <div class="bar__item bar__item_color_green" data-color="green"></div>
            <div class="bar__item bar__item_color_orange" data-color="orange"></div>
        </section>
        <section class="table-grid">
            <div class="table-grid__item">1</div>
            <div class="table-grid__item">2</div>
            <div class="table-grid__item">3</div>
            <div class="table-grid__item">4</div>
            <div class="table-grid__item">5</div>
            <div class="table-grid__item">6</div>
            <div class="table-grid__item">7</div>
            <div class="table-grid__item">8</div>
        </section>
    </main>
    </div>

БЛОГ НА HUSL

Смена цвета таблицы, при нажатии на кнопку

Ответы (1 шт):