WiP: x-tag x-countdown

index.html

<x-countdown endTime="20170414Z23:59:00"></x-countdown>

<p id="end-time">XXX</p>
<p>TODO: Refactor into countdown component with starting and ending time as component attributes.</p>
<p>JS dependency: https://rawgit.com/x-tag/core/master/dist/x-tag-core.js</p>
<p>DRETRO-9</p>

script.js

xtag.register('x-countdown', {
  lifecycle: {
    created: function(){
      this.start();
    }
  },
  
accessors: {
  endTime: {
    attribute: {},
    set: function(value) {
      this.xtag.data.endTime = value;
    },
    get: function() {
      return this.getAttribute('endTime') || "default value"; // Default value
    }
  }
},
  
  methods: {
    start: function(){
      this.update();
      this.xtag.interval = setInterval(this.update.bind(this), 1000);
      
      var elem = document.getElementById("end-time");
      elem.style.color = 'red';
      elem.innerHTML = this.endTime;
    },
    stop: function(){
      this.xtag.interval = clearInterval(this.xtag.interval);
    },
    update: function(){
      this.textContent = new Date().toLocaleTimeString();
    }
  },
  events: {
    tap: function(){
      if (this.xtag.interval) this.stop();
      else this.start();
    }
  }
});

scripts

<script src="https://rawgit.com/x-tag/core/master/dist/x-tag-core.min.js"></script>

style.css

body {
  background: white;
  text-align: center;
  font-size: 28px;
  padding: 20px;
}

wip-x-tag-x-countdown.markdown

WiP: x-tag x-countdown

This was based on the x-clock example from x-tag's home page (http://x-tag.github.io/overview). I just wanted to make sure it works in codepen.io.

A Pen by Oliver Schafeld on CodePen.

License.