Back Button

Reminds me of Get back by the Beatles. Good times.

<script>
class CountDown extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.targetDate = new Date(this.getAttribute('target-date'));
this.shadowRoot.innerHTML = `
<style>
</style>
<h1>CountDown</h1>
<div class="status"></div>
<span id="timer"></span>
`;
this.timer = this.shadowRoot.querySelector('#timer');
this.updateTimer();
this.interval = setInterval(() => this.updateTimer(), 1000);
}
disconnectedCallback() {
clearInterval(this.interval);
}
updateTimer() {
const now = new Date();
const diff = this.targetDate - now;
if (diff <= 0) {
this.timer.textContent = 'Done';
clearInterval(this.interval);
} else {
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
this.timer.textContent = `${days} days ${hours.toString().padStart(2, '0')}
:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')} left`;
}
}
}
customElements.define('count-down', CountDown);
</script>