Polymer CodePen starter

index.html

<!--
  All the Polymer paper-* and core-* elements have been imported here for you. Prototype away! 
-->

<!-- Let's build a countdown clock -->
  <paper-tabs selected="0">
  
    <paper-tab onclick="stuff(0);">Timer</paper-tab>
    <paper-tab onclick="stuff(1);">Countdown</paper-tab>
    <paper-tab onclick="stuff(2);">Clock</paper-tab>
    
  </paper-tabs>

<!--
  <select onchange="change();">
    <option value="cross-fade-all" selected>cross-fade-all</option>
    <option value="slide-from-right">slide-from-right</option>
  </select>
-->

 <core-animated-pages  transitions="slide-from-right">
    <section>
      <div layout vertical center center-justified style="background:#B4E0E1;">
        <div><flip-clock displayMode="timer" commandButtons="true"></flip-clock></div>
      </div>
    </section>
    <section>
      <div layout vertical center center-justified style="background:#F9B24F;">
        <div><flip-clock displayMode="countdown" startFrom="20" commandButtons="true"></flip-clock></div>
      </div>
    </section>
    <section>
      <div layout vertical center center-justified style="background:#E61875">
        <div><flip-clock></flip-clock></div>
      </div>
    </section>
   <!--
    <section>
      <div layout vertical center center-justified style="background:orange;">
        <div>4</div>
      </div>
    </section>
    <section>
      <div layout vertical center center-justified style="background:green;">
        <div>5</div>
      </div>
    </section>
-->
  </core-animated-pages>

<!--- More custom stuff -->



<!--
A flip clock, timer and countdown made with Polymer

##### Example

    <flip-clock></flip-clock>

@element flip-clock
@blurb A flip clock, timer and countdown made with Polymer
@status alpha
@homepage http://Granze.github.io/flip-clock
-->
<polymer-element name="flip-clock" attributes="displayMode commandButtons showSeconds startFrom auto">

  <template>

    <style>
      :host {
  display: block;
}

:host #clock {
  font-size: 0;
  font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  font-weight: bold;
}

:host #clock * {
  font-size: 70px;
}

      /*
:host #clock > span {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  padding: 5px 15px;
  border-radius: 4px;
  color: #fff;
  box-shadow: 1px 1px 1px #555;
  background-color: #333;
  background: -webkit-linear-gradient(top, #333 0%, #444 50%, #333 51%, #222 100%);
  background: linear-gradient(to bottom, #333 0%,#444 50%,#333 51%,#222 100%);
}

:host #clock > span:after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 3px;
  background-color: #111;
}

:host #clock > b {
  color: #333;
  margin-right: 10px;
}

:host .btn {
  margin: 20px 10px 10px 10px;
  padding: 5px 10px;
  border: 1px solid #000;
  border-radius: 2px;
  cursor: pointer;
  color: #dedede;
  background-color: #333;
}
  */
      
  :host paper-button {
    font-size: 20px;
  }
      
    :host paper-button.colored {
      color: #4285f4;
      fill: #4285f4;
    }

    :host paper-button[raisedButton].colored {
      background: #4285f4;
      color: #fff;
    }

    :host paper-button[raisedButton].colored #ripple,
    :hsot paper-button[raisedButton].colored::shadow #ripple {
      color: #2a56c6;
    }

    :host paper-button[raisedButton].colored #focusBg,
    :host paper-button[raisedButton].colored::shadow #focusBg {
      background: #3367d6;
    }
    </style>

    <content>

      <div id="clock">
        <span id="hours0">{{time[0]}}</span><span id="hours1">{{time[1]}}</span>
        <b>:</b>
        <span id="minutes0">{{time[2]}}</span><span id="minutes1">{{time[3]}}</span>

        <template if="{{showSeconds}}">
          <b>:</b>
          <span id="seconds0">{{time[4]}}</span><span id="seconds1">{{time[5]}}</span>
        </template>

      </div>
      
      <template if="{{displayMode == 'countdown'}}">
        <input type="number" value="{{time}}">
        <!--
        <input type="number" value="{{time[0]}}"><input type="number" value="{{time[1]}}">:
        <input type="number" value="{{time[2]}}"><input type="number" value="{{time[3]}}">:
       <input type="number" value="{{time[4]}}"><input type="number" value="{{time[5]}}">
-->
      </template>

      <template if="{{commandButtons && displayMode !== 'clock'}}">
        <!--
        <button class="toggle btn" on-click="{{startCount}}" disabled?="{{isRunning}}">Start </button>
        -->
        <paper-button raisedButton class="colored" on-click="{{startCount}}" disabled?="{{isRunning}}" label="start"></paper-button>
        <!--
        <button class="toggle btn" on-click="{{stopCount}}">Stop</button>
        -->
            <paper-button raisedButton class="colored" on-click="{{stopCount}}" label="Stop"></paper-button>     
<!--
        <button class="reset btn" on-click="{{resetCount}}">Reset</button>-->
        
        <paper-button raisedButton class="colored" on-click="{{resetCount}}">Reset</paper-button>
      </template>

    </content>

  </template>

  <script>

    Polymer('flip-clock', {
      /**
       * The `displayMode` attribute determine the kind of clock to display.
       *
       * @attribute displayMode
       * @type string
       * @default clock
       * @options clock, countdown, timer
       */
      displayMode: 'clock', 

      /**
       * Display start/stop and reset buttons
       *
       * @attribute commandButtons
       * @type bool
       */
      commandButtons: false,

      /**
       * Show or hide seconds
       *
       * @attribute showSeconds
       * @type bool
       * @default true
       */
      showSeconds: true,

      /**
       * Set the minutes to start from for the countdown mode
       *
       * @attribute startFrom
       * @type int
       * @default null
       */
      startFrom: null,

      /**
       * String containing the digits displayed in the flip clock
       *
       * @attribute time
       * @type string
       * @default '000000'
       */
      time: '000000',

      /**
       * Set the hours, minutes and seconds in the timer
       *
       * @attribute timer
       * @type string
       */
      timer: null,

      /**
       * Auto start timer and/or countdown
       *
       * @attribute auto
       * @type bool
       */
      auto: false,

      /**
       * Track if the timer (or the countdown) is running or not
       *
       * @attribute isRunning
       * @type bool
       */
      isRunning: false,

      /**
       * The `createClock` method start a clock that display the current time.
       *
       * @method createClock
       */
      createClock: function() {
        this.time = moment().format('HHmmss');
        this.async(this.createClock, null, 1000);
      },

      /**
       * The `createTimer` method create a timer
       *
       * @method createTimer
       */
      createTimer: function() {
        if(this.isRunning) {
          this.time = this.timer.add('s', 1).format('HHmmss');
          this.async(this.createTimer, null, 1000);
        }
      },

      /**
       * The `createCountdown` method create a countdown
       *
       * @method createCountdown
       */
      createCountdown: function() {
        if(this.isRunning) {
          if(this.time > 0) {
            this.time = this.timer.subtract('s', 1).format('HHmmss');
            this.async(this.createCountdown, null, 1000);
          }
        }
      },
      /**
       * The `startCount` method does no work at this time.
       *
       * @method startCount
       */
      startCount: function() {
        if(!this.timer) {
          this.timer = moment().hours(0).minutes(this.startFrom || 0).seconds(0);
        }
        this.isRunning = true;
        this.startFrom ? this.createCountdown() : this.createTimer();
      },

      /**
       * The `stopCount` stop the running timer or countdown
       *
       * @method stopCount
       */
      stopCount: function() {
        this.isRunning = false;
      },

      /**
       * The `resetCount` reset che counter
       *
       * @method resetCount
       */
      resetCount: function() {
        this.isRunning = false;
        this.time = this.startFrom ? '00' + this.startFrom + '00' : '000000';
        this.timer = null;
      },
      created: function() {
        this.resetCount();
      },
      ready: function() {
        switch(this.displayMode) {
          case 'timer':
            if(this.auto === true) {
              this.startCount();
            }
            break;
          case 'countdown':
            if(this.auto === true) {
              this.createCountdown();
            }
            break;
          default:
            this.createClock();
        }
        if(this.startFrom) {
          this.time = '00' + this.startFrom + '00';
        }
      }
    });

  </script>

</polymer-element>

<!--http://granze.github.io/flip-clock/components/flip-clock/demo.html-->

Polymer-CodePen-starter.markdown

Polymer CodePen starter

Forked from Addy Osmani's Pen Polymer CodePen starter.

A Pen by Captain Anonymous on CodePen.

License.

script.js

    function change() {
      var s = document.querySelector('select');
      document.querySelector('core-animated-pages').transitions = document.querySelector('select').options[s.selectedIndex].value;
    }

    function stuff(page) {
      var p = document.querySelector('core-animated-pages');
      p.selected = page;

    }

style.css

body {
   font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  margin:0;
}


core-animated-pages {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 72px;
  overflow: hidden;
}

section > div {
  height: 100%;
  color: white;
}

/*tabs*/
 paper-tabs, core-toolbar {
      background-color: #00bcd4;
      color: #fff;
      box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
    }
    
    core-toolbar paper-tabs {
      box-shadow: none;
    }
    
    paper-tabs[noink][nobar] paper-tab.core-selected {
      color: #ffff8d;
    }
    
    paper-tabs.transparent-teal {
      background-color: transparent;
      color: #00bcd4;
      box-shadow: none;
    }
    
    paper-tabs.transparent-teal::shadow #selectionBar {
      background-color: #00bcd4;
    }
    
    paper-tabs.transparent-teal paper-tab::shadow #ink {
      color: #00bcd4;
    }
    
    paper-button {
      margin: 1em;
      width: 10em;
    }