<h1>Score <span class="count">0</span></h1>

<button class="button inc">Add 1</button>
<button class="button dec">Subtract 1</button>
h1 {
  font-size: 50px;
}

.button {
  display: inline-block;
  border: 0;
  margin-top: 10px;
  border-radius: 5px;
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 25px;
  cursor: pointer;
  transition: background-color .25s ease-out;
}

.inc {
  background-color: #27ae60;
  color: white;
  
  &:hover {
      background-color: darken(#27ae60, 10%);
  }
}

.dec {
  background-color: #9b59b6;
  color: white;
  
  &:hover {
      background-color: darken(#9b59b6, 10%);
  }
}
const ee = new EventEmitter();

const state = {
  counter: 0
}

const buttons = [...document.querySelectorAll('.button')];

buttons.map(function(button) {
  button.addEventListener('click', (e) => {
    const buttonType = (e.target.classList.contains('inc')) ? 'increment' : 'decrement';
    
    ee.emit('button-click', {
      type: buttonType
    });
  })

})

const incrementCounter = () => {
  state.counter = state.counter + 1;
  ee.emit('counter-update', {
      value: state.counter
  });
}

const deccrementCounter = () => {
  if (state.counter == 0) return;
  
    state.counter = state.counter - 1;
   ee.emit('counter-update', {
      value: state.counter
  });
}

const updateCounterValue = (counter) => {
   const count = document.querySelector('.count');
   count.innerHTML = counter.value;
}

ee.on('counter-update', (value) => {
  updateCounterValue(value);
})

ee.on('button-click', (action) => {
  if (action.type == 'increment') {
    incrementCounter();
  } else {
    deccrementCounter();
  }
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/eventemitter3/3.1.0/index.min.js