script.js

document.addEventListener('DOMContentLoaded', () => {
    const clockElement = document.getElementById('clock');
    let is12HourFormat = true;

    function clock() {
        const clockTime = document.getElementById('date-time');
        const today = new Date();
        // get time components
        const hours = today.getHours();
        const minutes = today.getMinutes();
        const date = today.getDate();
        const month = today.toLocaleString('default', { month: 'short' });
        const year = today.getFullYear().toString().substring(2);

        //add '0' to hour & minute when they are less 10
        const hour = hours < 10 ? '0' + hours : hours;
        const minute = minutes < 10 ? '0' + minutes : minutes;

        //make clock a 12-hour time clock
        let hourTime = is12HourFormat ? (hours % 12 || 12) : hours;
        //assigning 'am' or 'pm' to indicate time of the day
        const ampm = hour < 12 ? ' AM' : ' PM';
        const time = hourTime + ':' + minute + (is12HourFormat ? ampm : '');

        const fullDate = date + '-' + month + '-' + year

        clockTime.innerHTML = `${time}<br>${fullDate}`;
        setTimeout(clock, 1000);
    }

    clockElement.addEventListener('click', () => {
        is12HourFormat = !is12HourFormat;
    });

    clock();
});