<link href="https://fonts.googleapis.com/css?family=Aref+Ruqaa" rel="stylesheet">
<div id="app">
<div id="setup">
<template v-if="showSetup">
<p class="noselect">Timer Setup:</p>
<p class="noselect">Work Timer: <input type="text" v-model.number="work"> minutes</p>
<p class="noselect">Pause Timer: <input type="text" v-model.number="pause"> minutes</p>
</template>
<template v-else>
{{ message }}
</template>
</div>
<div id="clock">
<template v-if="showClock">
{{ minutes }} : {{seconds}}<br><br>
<button type="button" v-on:click="resetClock">Reset</button>
</template>
<template v-else>
<button type="button" v-on:click="startClock">Start</button>
</template>
</div>
</div>
body {
background-image: url(http://tomato.trustice.de/webkegtoes.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
p {
margin: 5px;
}
#app {
font-family: 'Aref Ruqaa', serif;
font-size: 250%;
text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
margin: 0 auto;
text-align: center;
}
input {
width: 75px;
text-align: center;
border-style: groove;
font-size: 100%;
background: transparent;
border-color: white;
}
button {
background: transparent;
border: none;
font-size: 100%;
text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
border-style: groove;
border-color: white;
}
.noselect {
user-select: none;
}
new Vue({
el: '#app',
data: {
work: 25 , //default work time is 25 minutes
pause: 5 , //default pause time is 5 minutes
countdown: 0, //declaration here, init later in the timerfunction
state: 0, // 0 = idle; 1 = work; 2 = pause;
showClock: false,
showSetup: true,
message: ""
},
computed: {
minutes: function() {
var mins = Math.floor((this.countdown/60)%60);
if (mins < 10)
return '0' + mins;
else
return mins;
},
seconds: function() {
var secs = Math.floor(this.countdown%60)
if (secs < 10)
return '0' + secs;
else
return secs;
}
},
methods: {
startClock: function(){
this.showClock = true;
this.showSetup = false;
if (this.state === 0){
console.log("increasing state to work (state 1)");
this.state++;
this.message = "Work!"
alert('Get to work!');
console.log("state " + this.state);
this.countdown = this.work * 60;
console.log("countdown set to " + this.countdown + " seconds.");
}
else if (this.state === 1){
console.log("increasing state to pause (state 2)");
this.state++;
this.message = "Pause!"
alert('Relax now :)');
console.log("state " + this.state);
this.countdown = this.pause * 60;
console.log("countdown set to " + this.countdown + " seconds.");
}
else {
console.log("state is not work or pause. app on hold");
stopClock();
}
startCount = setInterval(this.timer, 1000);
},
timer: function (){
this.countdown -= 1;
console.log(this.countdown);
if (this.countdown === 0 && this.state === 1){
console.log("work (state 1) done");
clearInterval(startCount);
this.startClock();
}
else if (this.countdown === 0 && this.state === 2){
console.log("pause (state 2) finished - stopping clock and set state back to idle (state 0)");
this.stopClock();
}
},
stopClock: function () {
clearInterval(startCount);
this.message = "Session finished"
alert("Don't forget to start the timer if you go back to working again!")
console.log("app terminated.")
this.showClock = false;
this.showSetup = true;
},
resetClock: function () {
this.showClock = false;
this.showSetup = true;
clearInterval(startCount);
this.countdown = 0;
this.state = 0;
console.log("app reseted.")
}
}
});
Also see: Tab Triggers