Countdown

Countdown.js

/**
 * Countdown
 *
 * @see  https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_countdown
 */
class Countdown {
	/**
	 * Countdown.constructor
	 */
	constructor() {
		console.info('Countdown.constructor');
		// Set the date we're counting down to
		this.countDownDate = new Date('Dec 2, 2017 14:00:00').getTime();

		this.$element = document.getElementById('countdown');


		this.days = null;
		this.hours = null;
		this.minutes = null;
		this.secondes = null;

		this.now = null;
		this.distance = null;

		this.interval = setInterval(() => {
			this.setup();
		}, 1000);
	}

	setDays() {
		this.days = Math.floor(this.distance / (1000 * 60 * 60 * 24));

		this.$element.querySelector('.js-days').innerHTML = this.days;
	}

	setHours() {
		this.hours = Math.floor((this.distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

		this.$element.querySelector('.js-hours').innerHTML = this.hours;
	}

	setMinutes() {
		this.minutes = Math.floor((this.distance % (1000 * 60 * 60)) / (1000 * 60));

		this.$element.querySelector('.js-minutes').innerHTML = this.minutes;
	}

	setSecondes() {
		this.secondes = Math.floor((this.distance % (1000 * 60)) / 1000);

		this.$element.querySelector('.js-secondes').innerHTML = this.secondes;
	}

	setup() {
		// Get todays date and time
		this.now = new Date().getTime();

		// Find the distance between now an the count down date
		this.distance = this.countDownDate - this.now;

		this.setDays();
		this.setHours();
		this.setMinutes();
		this.setSecondes();

		if (this.distance < 0) {
			clearInterval(this.interval);
			this.$element.innerHTML = 'EXPIRED';
		}
	}
}

export default Countdown;