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