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.
<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> |
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(); | |
} | |
} | |
}); |
<script src="https://rawgit.com/x-tag/core/master/dist/x-tag-core.min.js"></script> |
body { | |
background: white; | |
text-align: center; | |
font-size: 28px; | |
padding: 20px; | |
} |
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.