.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 microtaskButton = document.getElementById('microtaskButton');
const timeoutButton = document.getElementById('timeoutButton');

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

microtaskButton.addEventListener('click', (e) => {
  e.target.textContent = "Looping...";
  e.target.disabled = true;
  
    const start = Date.now();
  
    function loop() {
      console.log("Loop!");

      queueMicrotask(() => {
        if(Date.now() - start < 5000) {
          loop();
        } else {
          e.target.textContent = "Loop via queueMicrotask()";
          e.target.disabled = false;
        }
      });
    };

    loop();
});

timeoutButton.addEventListener('click', (e) => {
  e.target.textContent = "Looping...";
  e.target.disabled = true;
  
    const start = Date.now();
  
    function loop() {
      console.log("Loop!");

      setTimeout(() => {
        if(Date.now() - start < 5000) {
          loop();
        } else {
          e.target.textContent = "Loop via setTimeout()";
          e.target.disabled = false;
        }
      });
    };

    loop();
});