24.04.2023, 20:18
Code:
hallo zusammen bin ich blind oder warum sehe ich den Fehler nicht ? lg tom
VueCompilerError: Element is missing end tag.
<template>
<div class="clock">
<div class="time">{{ time }}</div>
<div v-if="isAlarm">
<div class="alarm-time">{{ alarmTime }}</div>
<button @click="toggleAlarm">{{ alarmOn ? 'Deactivate Alarm' : 'Activate Alarm' }}</button>
</div>
<div v-if="isTimer">
<div class="timer-time">{{ timerTime }}</div>
<button @click="toggleTimer">{{ timerOn ? 'Stop Timer' : 'Start Timer' }}</button>
<button v-if="timerOn" @click="resetTimer">Reset Timer</button>
</div>
<div v-if="!isAlarm && !isTimer">
<select v-model="selectedMode">
<option value="time">Current Time</option>
<option value="alarm">Alarm</option>
<option value="timer">Timer</option>
</select>
<button @click="setMode">Set</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedMode: 'time',
isAlarm: false,
isTimer: false,
alarmOn: false,
alarmTime: null,
timerOn: false,
timerDuration: 0,
timerTime: '00:00:00',
timerInterval: null,
isRunning: false
};
},
computed: {
time() {
return new Date().toLocaleTimeString();
}
,
}
,
methods: {
setMode() {
this.isAlarm = this.selectedMode === 'alarm';
this.isTimer = this.selectedMode === 'timer';
if (this.isAlarm) {
this.alarmTime = new Date().toLocaleTimeString();
} else if (this.isTimer) {
this.timerTime = '00:00:00';
}
},
toggleAlarm() {
this.alarmOn = !this.alarmOn;
if (this.alarmOn) {
this.checkAlarm();
} else {
clearInterval(this.alarmInterval);
}
},
checkAlarm() {
this.alarmInterval = setInterval(() => {
if (new Date().toLocaleTimeString() === this.alarmTime) {
alert('Alarm!');
this.toggleAlarm();
}
}, 1000);
},
toggleTimer() {
if (this.isTimer) {
this.timerOn = !this.timerOn;
if (this.timerOn) {
this.timerInterval = setInterval(() => {
this.timerTime = this.getTimeString(this.timerDuration);
if (this.timerDuration <= 0) {
clearInterval(this.timerInterval);
this.$refs.alarm.play(); // Play alarm sound
} else {
this.timerDuration -= 1;
}
}, 1000);
} else {
clearInterval(this.timerInterval);
}
}
},
resetTimer() {
clearInterval(this.timerInterval);
this.timerDuration = 0;
this.timerTime = '00:00:00';
},
setTimer(duration) {
this.timerDuration = duration;
this.timerTime = this.getTimeString(duration);
},
getTimeString(seconds) {
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const secs = seconds % 60;
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
},
incrementTime() {
setInterval(() => {
if (this.isRunning && !this.isTimer) {
this.time = new Date().toLocaleTimeString();
}
}, 1000);
},
},
mounted() {
this.incrementTime();
},
}