Javascript-forum

Normale Version: Fehlermeldung
Sie sehen gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
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();
},
}

Ist das noch aktuell?
Ich kann Vue zwar nicht , aber wenn ich klammern zählen hast du 2 schließende zu viel, wenn ich mich nicht versehen habe.