script.js

let showSeconds = false;
let showAmPm = true;
let autoSize = true;

function showTime() {
    const date = new Date();
    let h = date.getHours(); // 0 - 23
    let m = date.getMinutes(); // 0 - 59
    let s = date.getSeconds(); // 0 - 59
    let session = "AM";

    if (h == 0) {
        h = 12;
    }

    if (h > 12) {
        h = h - 12;
        session = "PM";
    }

    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;

    let time = h + ":" + m;
    if (showSeconds) {
        time += ":" + s;
    }
    if (showAmPm) {
        time += " " + session;
    }

    const clockDisplay = document.getElementById("MyClockDisplay");
    clockDisplay.innerText = time;
    clockDisplay.textContent = time;

    if (autoSize) {
        adjustFontSize(clockDisplay);
    }

    setTimeout(showTime, 1000);
}

function adjustFontSize(element) {
    if (showSeconds && showAmPm) {
        element.style.fontSize = "120px";
    } else if (showSeconds || showAmPm) {
        element.style.fontSize = "150px";
    } else {
        element.style.fontSize = "180px";
    }
}

function toggleMenu() {
    const menu = document.getElementById('menu');
    if (menu.style.display === 'none' || menu.style.display === '') {
        menu.style.display = 'flex';
    } else {
        menu.style.display = 'none';
    }
}

function changeColor(color) {
    document.querySelector('.clock').style.color = color;
}

function changeFont(font) {
    document.querySelector('.clock').style.fontFamily = font;
}

function toggleSeconds() {
    showSeconds = !showSeconds;
    showTime();
}

function toggleAmPm() {
    showAmPm = !showAmPm;
    showTime();
}

function toggleAutoSize() {
    autoSize = !autoSize;
    const sizeSlider = document.getElementById('sizeSlider');
    sizeSlider.disabled = autoSize;
    if (autoSize) {
        showTime();
    }
}

function adjustSpacing(value) {
    document.querySelector('.clock').style.letterSpacing = value + 'px';
}

function adjustSize(value) {
    if (!autoSize) {
        document.querySelector('.clock').style.fontSize = value + 'px';
    }
}

function resetDefaults() {
    showSeconds = false;
    showAmPm = true;
    autoSize = true;
    document.getElementById('toggleSeconds').checked = false;
    document.getElementById('toggleAmPm').checked = true;
    document.getElementById('toggleAutoSize').checked = true;
    document.getElementById('spacingSlider').value = 7;
    document.getElementById('sizeSlider').value = 180;
    document.querySelector('.clock').style.color = '#73b66f';
    document.querySelector('.clock').style.fontFamily = 'Stencil';
    document.querySelector('.clock').style.letterSpacing = '7px';
    document.querySelector('.clock').style.fontSize = '180px';
    showTime();
}

document.addEventListener('DOMContentLoaded', (event) => {
    showTime();
});