JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="timer"></div>

CSS

.timer {
    text-align: center;
    font-size: 30px;
    color: green;
    &.is-done {
        color: red;
    }
}

JavaScript

'use strict';
 
class Timer {
    constructor(options = {}) {
        this.settings = this.setSettings(options);
        this.init();
    }
    init() {
        this.sourceSelector = document.querySelector(this.settings.sourceClass);
        this.interval = 1000;
        this.countDown = this.settings.timeToEnd * 60 * 1000;
        this.callback = this.settings.callback;
        this.runTimer();
    }
    setSettings(options) {
        const defaults = {
            sourceClass: ".timer",
            timeToEnd: 10, //minutes
            callback: function () {}
        };
        return Object.assign({}, defaults, options);
    }
     
    render() {
        let timerMessage = `
            <span class="timer-num">00</span>
            <span class="timer-dot">:</span>
        `;
        this.minutes = Math.floor(this.countDown / (60 * 1000));
        this.seconds = Math.floor((this.countDown - (this.minutes * 60 * 1000)) / 1000);
         
        if(this.seconds <= 9 && this.minutes <= 9) {
            timerMessage +=
               `<span class="timer-num timer-min">0${this.minutes}</span>
                <span class="timer-dot">:</span>
                <span class="timer-num timer-sec">0${this.seconds}</span>`;
        } else if(this.minutes <= 9) {
            timerMessage +=
               `<span class="timer-num timer-min">0${this.minutes}</span>
                <span class="timer-dot">:</span>
                <span class="timer-num timer-sec">${this.seconds}</span>`;
        } else if(this.seconds <= 9) {
            timerMessage +=
               `<span class="timer-num timer-min">${this.minutes}</span>
                <span class="timer-dot">:</span>
                <span class="timer-num timer-sec">0${this.seconds}</span>`;
        }
        this.sourceSelector.innerHTML = timerMessage;
    }
 
    runTimer() {
        const TIMER_ID = setInterval(() => {
            this.countDown -= this.interval;
             
            if (this.countDown === 0) {
...