<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 workerScript = `
  function pause(ms) {
    let time = new Date();
    while ((new Date()) - time <= ms) {}
 	}

  self.onmessage = function(e) {
    pause(e.data);
    self.postMessage('Process complete!');
  }
`;
const blob = new Blob([
  workerScript,
], {type: "text/javascipt"});

const worker = new Worker(window.URL.createObjectURL(blob));

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

worker.onmessage = function(e) {
  console.log(e.data);
  bumpCount();
}

button1.addEventListener('click', async function () {
  worker.postMessage(3000);
});

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

External CSS

  1. https://fonts.googleapis.com/css?family=Nunito:400,800,900

External JavaScript

This Pen doesn't use any external JavaScript resources.