<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;
}

function Counter (counterElement) {
  const countElement = counterElement.querySelector('span')
  const buttonElement = counterElement.querySelector('button')

  let count = parseInt(countElement.textContent) || 0

  const counter = {
    updateCounter () {
      countElement.textContent = count
    },

    increaseCount: (event) => {
      count = count + 1
      counter.updateCounter()
    }
  }

  buttonElement.addEventListener('click', counter.increaseCount)
}

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