JSFiddle - React, Tailwind, and code Playground

by Seungrae Lee

HTML

<h2>Demo#1. default action</h2> Time to left:
<div id="timer1" style="display:inline-block;"></div>
<br/>
<button name="startBtn" id="startBtn">
  start timer
</button>
<button name="stopBtn" id="stopBtn">
  stop timer
</button>
<button name="initBtn" id="initBtn">
  restart
</button>
<button name="getBtn" id="getBtn">
  what time is left?
</button>
<h2>Demo#2. option(customTimer)</h2> Time to left:
<div id="timer2" style="display:inline-block;"></div>

CSS

.blue {
  color: #0000ff;
}

JavaScript

/*!
 * jQuery timer plugin
 * version: 1.0.0-2016.07.14
 * Released under the MIT license
 */
(function(factory) {
  if (typeof define === "function" && define.amd) {
    // AMD. Register as an anonymous module.
    define(["jquery"], factory);
  } else {
    // Browser globals
    factory(jQuery);
  } //if~else
}(function($) {
  $.extend($.fn, {
    countdown: function(options) {
      // check if an instance of this form was already created
      var counter = $.data(this[0], "counter");
      if (counter) {
        return counter;
      }

      // create new instance
      counter = new $.counter(options, this[0]);
      $.data(this[0], "counter", counter);

      return counter;
    }
  });

  // constructor for timer
  $.counter = function(options, target) {
    // merge options
    this.settings = $.extend(true, {}, $.counter.defaults, options);
    this.target = target;
    this.init();
  };

  // implementation
  $.extend($.counter, {
    version: "1.0.0",
    defaults: {
      minute: 90,
      second: 0,
      timeout: 1000,
      alarm: {
        time: 5400
      }
    },
    setDefaults: function(settings) {
      $.extend($.counter.defaults, settings);
    },
    prototype: {
      init: function() {
        this.minute = this.settings.minute;
        this.second = this.settings.second;
        this.timer = null;
        this.seconds = 0;
        this.elapsed = 0;
        this.started = false;

        // start timer
        this.startTimer();
      },
      startTimer: function() {
        var self = this;
        if (!this.started) {
          this.timer = setInterval(function() {
            self.count();
          }, this.settings.timeout);
          this.started = true;
        }
      },
      stopTimer: function() {
        clearInterval(this.timer);
        this.started = false;
      },
      initTimer: function() {
        this.stopTimer();
        this.init();
      },
      count: function() {
        var self = this,
          _mm =...