JavaScript Clock #3 - Code Example

Demo

4.86 KB
HTML, CSS, JS
Clock
digital
MIT License

Code
Editor

HTML

<div id="clock">
    <div id="info">
        <div id="time"></div>
        <div id="date"></div>
    </div>
    <div id="controls">
        <span id="slider">
            <div id="slider1"></div>
            <div id="slider2"></div>
        </span>
    </div>
</div>

CSS

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");
body {
    font-family: "Roboto", sans-serif;
}

#clock {
    color: white;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-animation: fadeIn 1s ease-in-out;
    -moz-animation: fadeIn 1s ease-in-out;
    -o-animation: fadeIn 1s ease-in-out;
    animation: fadeIn 1s ease-in-out;
    cursor: pointer;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    padding: 0.5em 1em;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
#clock:hover {
    background: #8e44ad;
}
#clock #info {
    width: 100%;
}
#clock #info #time {
    font-size: 6em;
    display: inline-block;
}
#clock #info #date {
    margin-top: 1.8em;
    margin-bottom: 0.2em;
    font-size: 2em;
    display: inline-block;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
#controls #slider {
    display: block;
    cursor: pointer;
    width: 2em;
    height: 1.5em;
    -webkit-transition: 0.25s;
    -o-transition: 0.25s;
    -moz-transition: 0.25s;
    transition: 0.25s;
    position: relative;
}
#controls #slider div {
    position: absolute;
    content: "";
    height: 0.5em;
    width: 0.5em;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: 0.25s;
    -o-transition: 0.25s;
    -moz-transition: 0.25s;
    transition: 0.25s;
}
#controls #slider #slider2 {
    -webkit-transform: translateX(1em);
    -moz-transform: translateX(1em);
    -o-transform: translateX(1em);
    transform: translateX(1em);
    opacity: 0.5;
}

@media screen and (max-width: 750px) {
    #clock #info #time {
        font-size: 4.5em;
    }
    #clock #info #date {
        font-size: 1.5em;
    }
}
@media screen and (max-width: 450px) {
    #clock #info #time {
        font-size: 3em;
    }
    #clock #info #date {
        font-size: 1em;
    }
}

let hours24 = true;
const clock = document.querySelector("#clock");
clock.addEventListener("click", toggleFormat);

function toggleFormat() {
    const slider1 = document.getElementById("slider1");
    const slider2 = document.getElementById("slider2");
    hours24 = !hours24;
    if (hours24 == true) {
        slider1.style.opacity = 1;
        slider2.style.opacity = 0.5;
    } else {
        slider1.style.opacity = 0.5;
        slider2.style.opacity = 1;
    }
    displayClock();
}

function getTime(date, hourChange, suffix) {
    const hours = date.getHours() - hourChange;
    const minutes = ("0" + date.getMinutes()).slice(-2);
    const time = `${hours}:${minutes}${suffix}`;
    return time;
}

function getFormattedTime(date) {
    if (hours24 == false) {
        if (date.getHours() < 12) {
            return getTime(date, 0, "am");
        } else if (date.getHours() == 12) {
            return getTime(date, 0, "pm");
        } else {
            return getTime(date, 12, "pm");
        }
    } else {
        return getTime(date, 0, "");
    }
}

function displayClock() {
    const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    const date = new Date();
    const time = getFormattedTime(date);
    const shortDate = `${date.getDate()} - ${months[date.getMonth()]}`;

    document.getElementById("time").textContent = time;
    document.getElementById("date").textContent = shortDate;
}

function startClock() {
    displayClock();
    setInterval(displayClock, 1000);
}

startClock();

HTML
CSS
JS

Let’s dive into this cool piece of code that brings to life a digital clock on a webpage, jazzing it up with some interactive elements for a smooth user experience.

At its heart, the code consists of three main parts: HTML for structure, CSS for styling, and JavaScript for functionality.

The HTML section lays out the visual components of the clock, including spaces for displaying the time and date, and a control element for users to switch between 24-hour and 12-hour formats.

CSS steps in to make everything look pretty. It uses a sleek font from Google Fonts, ensures the clock elements are centrally aligned, and adds a neat fade-in effect when the clock first appears on the screen. Plus, it’s responsive! This means the size of the time and date adjust based on the screen size, ensuring the clock looks good on devices from smartphones to desktops.

JavaScript is where the magic happens. It initializes a flag to track whether the clock is in 24-hour or 12-hour mode. Then, it sets up a click listener on the clock element. When clicked, it toggles between the two modes, changing the opacity of the slider elements to indicate the current mode. It also includes a function to fetch the current time and date, format it according to the selected mode, and display it in the HTML elements. Finally, a function continuously updates the time every second, keeping the clock accurate.

This blend of HTML, CSS, and JavaScript offers a dynamic and interactive digital clock that not only tells time but also engages users with its format toggle feature, all the while looking sharp and functioning seamlessly across different devices.