document.addEventListener('DOMContentLoaded', function() { function label(element, value) { if(element.hasAttribute('value')) { if(value !== undefined) { element.setAttribute('value', value) } else { return element.getAttribute('value') } } else { if(value !== undefined) { element.textContent = value } else { return element.textContent } } } function countdownDeleteButton(event) { const btn = event.target const countdown = btn.getAttribute('data-countdown') if(countdown != 0) { event.preventDefault() btn.classList.add('__on-countdown') const hasCountdown = countdown !== null const newCountdown = hasCountdown ? countdown - 1 : 3 if(!hasCountdown) { btn.setAttribute('data-label', label(btn)) } label(btn, newCountdown) btn.setAttribute('data-countdown', newCountdown) setTimeout(countdownDeleteButton, 1000, event) } else { label(btn, btn.getAttribute('data-label')) } } document.querySelectorAll('.delete-btn').forEach(function(btn) { btn.addEventListener('click', countdownDeleteButton) }) })