99 lines
2.5 KiB
Vue
99 lines
2.5 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
const timer = ref(null);
|
|
|
|
const finished = ref(true);
|
|
const paused = ref(true);
|
|
|
|
const minutesInput = ref(0);
|
|
const secondsInput = ref(0);
|
|
|
|
const minutes = ref(0);
|
|
const seconds = ref(0);
|
|
|
|
const audio = new Audio("/sound/auughhh.mp3");
|
|
|
|
function tick() {
|
|
seconds.value++;
|
|
if (seconds.value === 60) {
|
|
minutes.value++;
|
|
seconds.value = 0;
|
|
}
|
|
|
|
if (minutes.value >= minutesInput.value) {
|
|
if (seconds.value >= secondsInput.value) {
|
|
finished.value = true;
|
|
playFinishedSound();
|
|
clearInterval(timer.value);
|
|
}
|
|
}
|
|
}
|
|
|
|
function startTimer() {
|
|
finished.value = false;
|
|
paused.value = false;
|
|
timer.value = setInterval(tick, 1000);
|
|
}
|
|
|
|
function pauseTimer() {
|
|
if (finished.value) return;
|
|
|
|
if (paused.value) {
|
|
timer.value = setInterval(tick, 1000);
|
|
paused.value = false;
|
|
} else {
|
|
clearInterval(timer.value);
|
|
paused.value = true;
|
|
}
|
|
}
|
|
|
|
function resetTimer() {
|
|
finished.value = true;
|
|
paused.value = true;
|
|
clearInterval(timer.value);
|
|
minutes.value = 0;
|
|
seconds.value = 0;
|
|
}
|
|
|
|
function playFinishedSound() {
|
|
audio.play();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col">
|
|
<h4 class="items-center">Timer</h4>
|
|
<!-- Min input and Second input-->
|
|
<div v-if="finished && paused" class="flex flex-row">
|
|
<input v-model="minutesInput" type="number" min="0" max="59" />
|
|
<input v-model="secondsInput" type="number" min="0" max="59" />
|
|
</div>
|
|
<div v-if="finished && !paused" class="flex flex-col">
|
|
<h1>Timer finished!</h1>
|
|
</div>
|
|
<div v-if="!finished && paused">
|
|
<h1>Paused</h1>
|
|
</div>
|
|
<div v-if="!finished && !paused" class="flex flex-col">
|
|
<h1>
|
|
{{ minutes.toString().padStart(2, "0") }}:{{
|
|
seconds.toString().padStart(2, "0")
|
|
}}
|
|
</h1>
|
|
<h1>
|
|
{{ minutesInput.toString().padStart(2, "0") }}:{{
|
|
secondsInput.toString().padStart(2, "0")
|
|
}}
|
|
</h1>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<button v-if="paused" @click="startTimer">Proceed</button>
|
|
<button v-if="!finished && !paused" @click="pauseTimer">
|
|
Pause
|
|
</button>
|
|
<button v-if="finished ^ paused" @click="resetTimer">Reset</button>
|
|
</div>
|
|
</div>
|
|
</template>
|