Simple counter with API wait

by omarrida_tightenco

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
<div class="w-full h-full px-12 py-12">
  <div class="flex">
    <div class="text-8xl flex-1" id="counterContent">0</div>

    <button class="flex-1 bg-blue-500 text-2xl text-white uppercase tracking-wider font-bold hover:bg-blue-600 px-4 py-2 mr-2 rounded" id="incrementButton">Increment</button>
  </div>
  
  <p id="apiStatus" class="py-6"></p>

</div>

JavaScript

document.addEventListener('DOMContentLoaded', (event) => {
  let counter = 0;
  let debounceTimeout;

  incrementButton.addEventListener('click', () => {
    // Clear the previous timeout if there's any
    clearTimeout(debounceTimeout);

    // Update the status
    apiStatus.textContent = "Waiting for the server to respond...";

    // Set a new timeout
    debounceTimeout = setTimeout(() => {
      apiStatus.textContent = "";
      counter++;
      counterContent.textContent = counter;
      incrementButton.disabled = false;
    }, 500);

    // Disable the button to prevent multiple clicks during the wait time
    incrementButton.disabled = true;
  });
});