Web Components Tech Share

by jamstooks

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"></script>
<polymer-element
    name="countdown-counter"
    attributes="end">
  <template>
    <style>
      :host {
         display: block;
         border: 1px solid yellow;
         padding: 20px;
         text-align: center;
       }
    </style>
      <p>My Date: {{myDate|prettyDate}}</p>
      <p>The date: {{currentDate}}</p>
      <p>Until {{end}}</p>
  </template>
</polymer-element>

<countdown-counter id="cd" end="2014-10-26"></countdown-counter>

<script>
function clickit() {
    var cd = document.getElementById("cd");
    cd.end = "2014-11-26";
}
</script>
<button onclick="clickit()">Change Date</button>

<!-- ideal output -->

<p>
    20 days 2 hours 10 minutes and 30 seconds
</p>

CSS

p {
    background-color: lightgray;
    padding: 40px;
}

JavaScript

Polymer('countdown-counter', {
    
    /* properties */
    
    currentDate: new Date(),
    myDate: new Date(),
    
    /**
     * returns a well formatted date
    */
    prettyDate: function(d) {
        return d.getMonth();       
    },
    
    /**
     * Listener to the end property
    */
    endChanged: function() {
      this.myDate = this.myDate.parse(this.end);
      alert("date changed!" + this.myDate);
    }
});