CODE IN HTML CSS AND JAVASCRIPT FOR DIGITAL CLOCK ► CODING

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Digital Clock</title>
<style>
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif;
        background-color: #121212;
        color: #ffffff;
    }

    .clock-container {
        text-align: center;
        background: #333;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
    }

    .clock {
        font-size: 48px;
        font-weight: bold;
        letter-spacing: 2px;
    }

    .date {
        font-size: 24px;
        margin-top: 10px;
        color: #bbb;
    }

    .timezone {
        font-size: 20px;
        margin-top: 5px;
        color: #ff8c00;
    }

    .features {
        margin-top: 20px;
        font-size: 16px;
        color: #90ee90;
    }

    .settings {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .settings input[type="color"],
    .settings select,
    .settings button {
        padding: 5px;
        font-size: 16px;
    }
</style>
</head>
<body>
<div class="clock-container">
    <div class="clock" id="clock">00:00:00</div>
    <div class="date" id="date">Sunday, January 1, 2024</div>
    <div class="timezone" id="timezone">TimeZone: UTC</div>

    <div class="settings">
        <label for="colorPicker">Change Background Color:</label>
        <input type="color" id="colorPicker" value="#121212">

        <label for="formatSelect">Select Time Format:</label>
        <select id="formatSelect">
            <option value="12">12-Hour</option>
            <option value="24">24-Hour</option>
        </select>

        <label for="timezoneSelect">Change Timezone:</label>
        <select id="timezoneSelect">
            <option value="UTC">UTC</option>
            <option value="GMT">GMT</option>
            <option value="CET">CET</option>
            <option value="EST">EST</option>
            <option value="PST">PST</option>
            <!-- Add more time zones as needed -->
        </select>

        <button id="saveSettings">Save Settings</button>
        <button onclick="toggleFullScreen()">Toggle Fullscreen</button>
    </div>
<script>
    const clock = document.getElementById("clock");
    const dateEl = document.getElementById("date");
    const timezoneEl = document.getElementById("timezone");
    const colorPicker = document.getElementById("colorPicker");
    const formatSelect = document.getElementById("formatSelect");
    const timezoneSelect = document.getElementById("timezoneSelect");
    let is24HourFormat = false;

    // Load saved preferences
    window.onload = function () {
        const savedColor = localStorage.getItem("bgColor") || "#121212";
        const savedFormat = localStorage.getItem("timeFormat") || "12";
        const savedTimezone = localStorage.getItem("timezone") || "UTC";

        document.body.style.backgroundColor = savedColor;
        colorPicker.value = savedColor;
        formatSelect.value = savedFormat;
        timezoneSelect.value = savedTimezone;

        is24HourFormat = savedFormat === "24";
        timezoneEl.innerText = `TimeZone: ${savedTimezone}`;
        updateClock();
        setInterval(updateClock, 1000);
    };

    // Update clock and date
    function updateClock() {
        const now = new Date();
        const hours = is24HourFormat ? now.getUTCHours() : ((now.getUTCHours() % 12) || 12);
        const minutes = now.getUTCMinutes();
        const seconds = now.getUTCSeconds();
        const ampm = now.getUTCHours() >= 12 ? "PM" : "AM";

        clock.innerText = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')} ${!is24HourFormat ? ampm : ""}`;
        dateEl.innerText = now.toUTCString().slice(0, 16); // Displays the day and date
    }

    // Save settings
    document.getElementById("saveSettings").onclick = function () {
        localStorage.setItem("bgColor", colorPicker.value);
        localStorage.setItem("timeFormat", formatSelect.value);
        localStorage.setItem("timezone", timezoneSelect.value);

        document.body.style.backgroundColor = colorPicker.value;
        is24HourFormat = formatSelect.value === "24";
        timezoneEl.innerText = `TimeZone: ${timezoneSelect.value}`;
        alert("Settings saved!");
    };

    // Fullscreen toggle
    function toggleFullScreen() {
        if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen();
        } else {
            document.exitFullscreen();
        }
    }
</script>
</body>
</html>

JavaScript

Share this:

Leave a Reply Cancel reply