Init commit

Author: Anwar Hussain

.gitignore

@@ -0,0 +1 @@
+node_modules/

Countdown.vue

@@ -0,0 +1,110 @@
+<template>
+<ul class="vue-countdown">
+ <li>
+ <p class="digit">{{ days | twoDigits }}</p>
+ <p class="text">days</p>
+ </li>
+
+ <li>
+ <p class="digit">{{ hours | twoDigits }}</p>
+ <p class="text">hours</p>
+ </li>
+
+ <li>
+ <p class="digit">{{ minutes | twoDigits }}</p>
+ <p class="text">Min</p>
+ </li>
+
+ <li>
+ <p class="digit">{{ seconds | twoDigits }}</p>
+ <p class="text">Sec</p>
+ </li>
+</ul>
+</template>
+
+<script>
+import Vue from 'vue'
+
+Vue.filter('twoDigits', (value) => {
+ if ( value.toString().length <= 1 ) {
+ return '0'+value.toString()
+ }
+ return value.toString()
+})
+
+export default {
+ props: ['deadline'],
+
+ data() {
+ return {
+ now: Math.trunc((new Date()).getTime() / 1000),
+ date: null
+ }
+ },
+
+ mounted() {
+ this.date = Math.trunc(Date.parse(this.deadline) / 1000)
+
+ setInterval(() => {
+ this.now = Math.trunc((new Date()).getTime() / 1000)
+ }, 1000)
+ },
+
+ computed: {
+ seconds() {
+ return Math.trunc(this.date - this.now) % 60
+ },
+
+ minutes() {
+ return Math.trunc((this.date - this.now) / 60) % 60
+ },
+
+ hours() {
+ return Math.trunc((this.date - this.now) / 60 / 60) % 24
+ },
+
+ days() {
+ return Math.trunc((this.date - this.now) / 60 / 60 / 24)
+ }
+ }
+}
+</script>
+<style lang="sass" rel="stylesheet/sass">
+.vue-countdown
+ padding: 0
+ margin: 0
+
+ li
+ display: inline-block
+ margin: 0 8px
+ text-align: center
+ position: relative
+
+ &:after
+ content: ':'
+ position: absolute
+ top: 0
+ right: -13px
+ font-size: 32px
+
+ &:first-of-type
+ margin-left: 0
+
+ &:last-of-type
+ margin-right: 0
+
+ &:after
+ content: ''
+
+ .digit
+ font-size: 32px
+ font-weight: 600
+ line-height: 1.4
+ margin-bottom: 0
+
+ .text
+ text-transform: uppercase
+ margin-bottom: 0
+ font-size: 10px
+
+</style>

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 getanwar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,5 @@
+# vue-countdown
+A simple countdown timer component for vue js 2.0
+
+## Installation
+`npm i vuejs-countdown --save`

package.json

@@ -0,0 +1,16 @@
+{
+ "name": "vuejs-countdown",
+ "version": "0.0.1",
+ "description": "A simple countdown timer component for vue js 2.0",
+ "main": "Countdown.vue",
+ "scripts": {
+
+ },
+ "keywords": [
+ "Countdown",
+ "timer",
+ "vue countdown"
+ ],
+ "author": "Anwar H.",
+ "license": "MIT"
+}