Destructive Button

<!--
  Colour alone is not a safeguard - red is invisible to a red-blind user and
  means nothing to a screen reader. The confirm step is the actual protection:
  the first click only arms the button, the second one deletes.
-->
<button class="danger-btn" type="button" data-armed="false">
  <span class="danger-btn__label" aria-live="polite">Delete project</span>
</button>

<script>
  document.querySelectorAll('.danger-btn').forEach(function (button) {
    var label = button.querySelector('.danger-btn__label');
    var idle = label.textContent;
    var timer;

    function disarm() {
      button.dataset.armed = 'false';
      label.textContent = idle;
      window.clearTimeout(timer);
    }

    button.addEventListener('click', function () {
      if (button.dataset.armed !== 'true') {
        button.dataset.armed = 'true';
        label.textContent = 'Are you sure?';
        // Disarm on its own so a forgotten armed button is not a landmine for
        // the next person who clicks it.
        timer = window.setTimeout(disarm, 4000);
        return;
      }
      disarm();
      // Real deletion goes here.
      console.log('deleted');
    });

    // Leaving the button is a signal the user changed their mind.
    button.addEventListener('blur', disarm);
  });
</script>