<template lang="">
    <div class="container">
        <h1>{{title}}</h1>
        <hr>
        <div class="LCD">
            <div class="hours">{{hours}}</div>
            <div>:</div>
            <div class="minutes">{{minutes}}</div>
            <div>:</div>
            <div class="seconds">{{seconds}}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "DigitalClock",
    data() {
        return{
            title:"Digitalni hodiny",
            hours: 0,
            minutes: 0,
            seconds: 0
        }
    },
    methods: {
        setTime(){
            var date = new Date();
            let hours = date.getHours();
            let minutes = date.getMinutes();
            let seconds = date.getSeconds();
            hours = hours <= 9 ? `${hours}`.padStart(2,0) : hours
            minutes = minutes <= 9 ? `${minutes}`.padStart(2,0) : minutes
            seconds = seconds <= 9 ? `${seconds}`.padStart(2,0) : seconds
            this.hours = hours;
            this.minutes = minutes;
            this.seconds = seconds;
        }
    },
    mounted() {
        setInterval(() => {
            this.setTime()
        }, 1000)
    }
}
</script>
<style scoped>
    .LCD {
        display: flex;
        justify-content: center;
    }
    .LCD > div{
        font-size: x-large;
    }
</style>