The code below the box is loaded into it using the data-*-selector attributes.
<h1>Hello, <span id="name">world</span>!</h1>
<button id="button">Click me</button>
body {
font-family: system-ui, sans-serif;
padding: 1em;
}
h1 {
color: rebeccapurple;
}
let clicks = 0;
document.getElementById('button').addEventListener('click', () => {
clicks++;
document.getElementById('name').textContent = `you (${clicks})`;
console.log('Clicked', clicks, 'times', {clicks, when: new Date()});
});
console.log('Ready!');