<button id="data">Get Random Name</button>
<h1 id='title'>&nbsp;</h1>
<div id="click">Click me: <span class='count'>0</span></div>
#click {
    height: 200px;
    width: 200px;
    background: aquamarine;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
const dataBtn = document.getElementById("data")
const title = document.getElementById("title")
const click = document.getElementById("click")
const count = document.querySelector('.count')

function getData() {
    fetch("https://uinames.com/api/?amount=1")
    .then(resp => resp.json())
    .then(data => title.innerHTML = data.name)
}

dataBtn.addEventListener('click', () => window.setTimeout(getData, 3000));

click.addEventListener('click', () => count.innerText ++)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.