script.js

const getalle = {
    0: "uur",   1: "een",   2: "twee",
    3: "drie",  4: "vier",  5: "vyf",
    6: "ses",   7: "sewe",  8: "agt",
    9: "nege",  10: "tien", 11: "elf",
    12: "twaalf", 15: "kwart", 20: "twintig", 
    25: "vyf en twinting", 30: "half", 
}

function kryTyd() {
    const nou = new Date();
    const ure = nou.getHours();
    const minute = Math.floor( nou.getMinutes() / 5 ) * 5;

    let volgendeUur = (ure%12) + 1;
    volgendeUur = (volgendeUur > 12) ? 1 : volgendeUur;

    if (ure === 0 && minute % 5 < 5) return 'middernag';

    if (minute === 0) {
        return getalle[ure%12 || 12] + " uur";
    } else if (minute === 30) {
        return 'half ' + getalle[( ure + 1 ) % 12 || 12];
    }

    let minuteIndeks = minute;
    if (minuteIndeks > 30) {
        minuteIndeks = 30 - (minuteIndeks % 30);
    }

    return getalle[ minuteIndeks ] + ` ${ (minute > 30) ? 'v' : '' }oor ` + getalle[ (( minute>30 ) ? volgendeUur : ure )%12 || 12];
}

let currentTimeText = '';

function tydEvalueeringsFunksie() {
    const newTime = kryTyd();
    if (newTime !== currentTimeText) {
        currentTimeText = newTime;
        document.getElementById('tyd').innerText = newTime;
    }
    setTimeout(tydEvalueeringsFunksie, 1000);
}

document.addEventListener('DOMContentLoaded', function() {
    tydEvalueeringsFunksie();

    const progressBar = document.getElementById('progress-bar');
    const btn25 = document.getElementById('timer-25');
    const btn50 = document.getElementById('timer-50');
    let timerTimeout = null;
    let duration = 0;

    function startTimer(minutes, btn) {
        if (timerTimeout) {
            clearTimeout(timerTimeout);
        }
        
        btn25.classList.remove('active');
        btn50.classList.remove('active');
        btn.classList.add('active');
        
        duration = minutes * 60 * 1000;
        
        progressBar.style.transition = `transform ${duration}ms linear`;
        progressBar.style.transform = 'scaleX(0)';
        
        timerTimeout = setTimeout(() => {
            progressBar.style.transition = 'transform 0.3s ease';
            progressBar.style.transform = 'scaleX(1)';
            btn.classList.remove('active');
            timerTimeout = null;
        }, duration);
    }

    btn25.addEventListener('click', () => startTimer(25, btn25));
    btn50.addEventListener('click', () => startTimer(50, btn50));
});