<div class="counter">
    <p>Count: <span>0</span></p>
    <button>Increase Count</button>
  </div>

html {
  font: 1em sans-serif;
}

body {
  padding: 1em;
}

p {
  font-size: 2em;
  line-height: 1;
  margin: 1rem 0;
}

button {
  font: inherit;
  padding: 0.5em 0.75em;
  background-color: #eee;
  border: 1px solid #222;
  color: black;
}

class Counter {
  #count = 0

  constructor (counter) {
    this.countElement = counter.querySelector('span')
    this.buttonElement = counter.querySelector('button')

    // Initializes count
    this.#count = parseInt(this.countElement.textContent)

    // Adds event listener
    this.buttonElement.addEventListener('click', this.increaseCount)
  }

  updateCounter () {
    this.countElement.textContent = this.#count
  }

  increaseCount = () => {
    this.#count = this.#count + 1
    this.updateCounter()
  }
}

const counter = new Counter(document.querySelector('.counter'))