.wrapper {
  display: flex;
  gap: 2rem;
}

:root {
    --blue: #4299e1;
    --darkblue: #2b6cb0;
}

button {
    background: var(--blue);
    color: white;
    border: 3px solid var(--blue);
}

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

.wrapper div {
  overflow: auto;
}

.button-alt {
  border: 3px solid var(--blue);
  background: none;
  color: var(--blue);
}

.button-alt:hover {
  color: white;
  background: var(--blue);
}

.button-alt:disabled:hover {
  color: var(--blue);
  background: white;
}

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

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

const incrementButton = document.getElementById('incrementButton');
const synchronousButton = document.getElementById('synchronousButton');
const asynchronousButton = document.getElementById('asynchronousButton');

function doExpensiveProcess(item) {
  console.log('PROCESSING:', item);
  const start = Date.now();
        
  // Thread is blocked! No UI updates allowed.
  while (Date.now() - start < 500) {}
}

incrementButton.addEventListener('click', () => {
    count.innerText = Number(count.innerText) + 1;
});

synchronousButton.addEventListener('click', (e) => {
  e.target.textContent = "Looping...";
  e.target.disabled = true;
  
  function processItems(items) {
    const item = items.shift();

    doExpensiveProcess(item);

    if (items.length) {
      processItems(items);
    }
  }

  processItems([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]);
  
  e.target.textContent = "Synchronous Loop";
  e.target.disabled = false;
});

asynchronousButton.addEventListener('click', (e) => {
  e.target.textContent = "Looping...";
  e.target.disabled = true;
  
  function processItems(items) {
    setTimeout(() => {
      const item = items.shift();

      doExpensiveProcess(item);

      if (items.length) {
        processItems(items);
      }
    });
  }

  processItems([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]);
  
  e.target.textContent = "Asynchronous Loop";
  e.target.disabled = false;
});