JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div id="app">
  <div id="result">0</div>
  <div id="buttons"></div>
</div>

CSS

body {
  margin: 0;
  background: #fff;
}

#app {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}

button {
  background-color: #bbb;
  color: #fff;
  min-width: 60px;
  line-height: 1.5;
  padding: 10px 0; 
  border: 1px solid #fff;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition: 0.2s ease;
  cursor: pointer;
  outline: none;
  position: relative;
}

button::before {
  content: '0';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  color: #ddd;
  font-size: 50px;
  font-weight: bold;
  pointer-events: none;
}

button:hover {
  background-color: #7ed481;
}

button.is-active {
  background-color: #4CAF50; 
}

button.is-active:before {
  content: '1';
}

button.is-active:before,
button.is-active ~ button:before {
  color: #7ed481;
}

button.is-active:hover {
  background-color: #62b965;
}

button span {
  display: block;
  color: #000;
}

#result {
  font-family: monospace;
  font-size: 200px;
  margin: 0 0 30px;
  font-weight: bold;
}

JavaScript

const $buttons = document.querySelector('#buttons')
const $result = document.querySelector('#result')
const bits = 8
let result = 0

const appendBtn = (value = 0, pow = 0) => {
  const $btn = document.createElement('button');
  $btn.value = value
  $btn.innerHTML = value + `<span>2^${pow}</span>`

	$btn.addEventListener('click', e => {
  	const isActive = $btn.isActive = !$btn.isActive
    isActive ? $btn.classList.add('is-active') : $btn.classList.remove('is-active')
    isActive ? (result += value) : (result -= value)

    $result.innerText = result
  })

  $buttons.append($btn)
}

for (let i = bits - 1; i > 0; i--) {
	appendBtn(2 << i - 1, i)

  if (i === 1) {
	  appendBtn(1, 0)
  }
}