<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;
}
View Compiled
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'))
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.