wookimiii/timer.html

## timer.html
<!DOCTYPE html>
<html>
<head>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js' type='text/javascript' ></script>
    <script src="https://unpkg.com/vue"></script>
<style>
body {
  color: #CCC;
  background-color: black;
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
  vertical-align: middle;
  padding: 20px;
}
.clock {
  font-size: 8em;
  text-align: center;
}

.clock span {
  font-size: 0.8em;
}
.timer {
  text-align: center;
  font-size: 5em;
}
.timer label {
  color: #333;
  display: block;
  font-size: 0.6em;
  margin-top: 15px;
}

.timer span {
  font-size: 0.2em;
  cursor: pointer;
  color: #333;
}
</style>
</head>
<body>
<div id='app'>
    <clock :time='time'></clock>
    <timer :msecs='timer.msecs'></timer>
</div>
<script type='text/javascript'>
    Vue.component('clock', {
        template: '<div class="clock">{{hourMinute}} <span>{{meridian}}</span></div>',
        props: ['time'],
        computed: {
            hourMinute: function () {
                return moment(this.time).format("h:mm");
            },
            meridian: function () {
                return moment(this.time).format('A');
            }
        }
    });

    Vue.component('timer', {
        template: '<div class="timer"><div><label>Time left:</label>{{display}} minutes</div><span v-on:click="reset">reset</span><span> / </span><span v-on:click="pauseStart">{{ running ? "pause" : "resume" }}</span></div>',
        props: ['msecs', 'running'], // in seconds
        computed: {
            display: function () {
                return Math.round(this.msecs/1000/60);
            }
        },
        methods: {
            reset: function () {
                resetTimer();
            },
            pauseStart: function () {
                pauseStartTimer();
            }
        }
    });

    var DATA = {
        time: new Date(),
        timer: {
            msecs: 1000 * 60 * 30,
            lastUpdate: null,
            running: true
        }
    };

    var app = new Vue({
        el: '#app',
        data: DATA,
        methods: {
            updateTime: function () {
                this.time = new Date();
                if (!this.timer.lastUpdate) { this.timer.lastUpdate = this.time; }
                if (this.timer.running) {
                    var delta = this.time - this.timer.lastUpdate;
                    this.timer.msecs = Math.max(this.timer.msecs - delta, 0);
                }
                this.timer.lastUpdate = this.time;
            }
        },
        mounted: function () {
            this.interval = setInterval(this.updateTime, 1000);
        },
        beforeDestroy: function (){
            clearInterval(this.interval);
        }
    });

    function resetTimer() {
        DATA.timer = {
            msecs: 1000 * 60 * 60,
            lastUpdate: null,
            running: true
        };
    }

    function pauseStartTimer() {
        DATA.timer.running = !DATA.timer.running;
    }
</script>
</body>
	<!DOCTYPE html>
	<html>
	<head>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js' type='text/javascript' ></script>
	<script src="https://unpkg.com/vue"></script>
	<style>
	body {
	color: #CCC;
	background-color: black;
	font-family: Arial, Helvetica, sans-serif;
	height: 100%;
	vertical-align: middle;
	padding: 20px;
	}
	.clock {
	font-size: 8em;
	text-align: center;
	}

	.clock span {
	font-size: 0.8em;
	}
	.timer {
	text-align: center;
	font-size: 5em;
	}
	.timer label {
	color: #333;
	display: block;
	font-size: 0.6em;
	margin-top: 15px;
	}

	.timer span {
	font-size: 0.2em;
	cursor: pointer;
	color: #333;
	}
	</style>
	</head>
	<body>
	<div id='app'>
	<clock :time='time'></clock>
	<timer :msecs='timer.msecs'></timer>
	</div>
	<script type='text/javascript'>
	Vue.component('clock', {
	template: '<div class="clock">{{hourMinute}} <span>{{meridian}}</span></div>',
	props: ['time'],
	computed: {
	hourMinute: function () {
	return moment(this.time).format("h:mm");
	},
	meridian: function () {
	return moment(this.time).format('A');
	}
	}
	});

	Vue.component('timer', {
	template: '<div class="timer"><div><label>Time left:</label>{{display}} minutes</div><span v-on:click="reset">reset</span><span> / </span><span v-on:click="pauseStart">{{ running ? "pause" : "resume" }}</span></div>',
	props: ['msecs', 'running'], // in seconds
	computed: {
	display: function () {
	return Math.round(this.msecs/1000/60);
	}
	},
	methods: {
	reset: function () {
	resetTimer();
	},
	pauseStart: function () {
	pauseStartTimer();
	}
	}
	});

	var DATA = {
	time: new Date(),
	timer: {
	msecs: 1000 * 60 * 30,
	lastUpdate: null,
	running: true
	}
	};

	var app = new Vue({
	el: '#app',
	data: DATA,
	methods: {
	updateTime: function () {
	this.time = new Date();
	if (!this.timer.lastUpdate) { this.timer.lastUpdate = this.time; }
	if (this.timer.running) {
	var delta = this.time - this.timer.lastUpdate;
	this.timer.msecs = Math.max(this.timer.msecs - delta, 0);
	}
	this.timer.lastUpdate = this.time;
	}
	},
	mounted: function () {
	this.interval = setInterval(this.updateTime, 1000);
	},
	beforeDestroy: function (){
	clearInterval(this.interval);
	}
	});

	function resetTimer() {
	DATA.timer = {
	msecs: 1000 * 60 * 60,
	lastUpdate: null,
	running: true
	};
	}

	function pauseStartTimer() {
	DATA.timer.running = !DATA.timer.running;
	}
	</script>
	</body>