<button id="button1">
    Freeze
</button>

<button id="button2">
    Increment
</button>

<br>
<br>

<span>Click Count: <span id="count">0</span></span>

<br>
<br>

<div>
    resize me!
</div>

            :root {
                --blue: #4299e1;
                --darkblue: #2b6cb0;
            }
            
            button {
                background: var(--blue);
                color: white;
            }

            * {
                font-size: 25px;
                font-family: 'Nunito', sans-serif;
            }

            div {
                resize: both;
                border: 3px solid var(--blue);
                height: 200px;
                width: 200px;
                overflow: auto;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            button {
                background: var(--blue);
                color: white;
                padding: .25rem 1rem;
                border: none;
                border-radius: 3px;
            }

            button:hover {
                cursor: pointer;
                background: var(--darkblue);
            }

const button1 = document.getElementById('button1');
const button2 = document.getElementById('button2');
const count = document.getElementById('count');

const pause = (ms) => {
  let time = new Date();
  while ((new Date()) - time <= ms) {}
}

const bumpCount = () => {
  count.innerText = Number(count.innerText) + 1;
}

button1.addEventListener('click', async function () {
    pause(3000);
    bumpCount();
});

button2.addEventListener('click', function () {
    bumpCount();
});