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