Javascript and CSS Watch with 4 time Zones

In this example below you will see how to do a Javascript and CSS Watch with 4 time Zones with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by lov4code, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright lov4code ©
  • HTML
  • CSS
  • JavaScript
    
<div class="clock-container">
    <div class="clock">
        <img src="http://pantburk.info/upload/analogclock/bg_1000x1000.png" alt="nice clock">
        <div class="hour hand"></div>
        <div class="minute hand"></div>
        <div class="second hand"></div>
        <div class="cap"></div>
        <div class="central-time">
            <img src="http://pantburk.info/upload/analogclock/bg_1000x1000.png" alt="nice clock">
            <div class="hour i-hand"></div>
            <div class="minute i-hand"></div>
            <div class="second i-hand"></div>
            <div class="i-cap"></div>
            <div class="i-bevel"></div>
        </div>
        <div class="mountain-time">
            <img src="http://pantburk.info/upload/analogclock/bg_1000x1000.png" alt="nice clock">
            <div class="hour i-hand"></div>
            <div class="minute i-hand"></div>
            <div class="second i-hand"></div>
            <div class="i-cap"></div>
            <div class="i-bevel"></div>

        </div>
        <div class="pacific-time">
            <img src="http://pantburk.info/upload/analogclock/bg_1000x1000.png" alt="nice clock">
            <div class="hour i-hand"></div>
            <div class="minute i-hand"></div>
            <div class="second i-hand"></div>
            <div class="i-cap"></div>
            <div class="i-bevel"></div>

        </div>
        <div class="glass"></div>
        <div class="bevel"></div>
        <div class="left-band"></div>
        <div class="right-band">
            <div class="holes">
                <div class="hole-1"></div>
                <div class="hole-2"></div>
                <div class="hole-3"></div>
                <div class="hole-4"></div>
            </div>
        </div>
    </div>
</div>

/*Downloaded from https://www.codeseek.co/lov4code/javascript-and-css-watch-with-4-time-zones-KavWKx */
    .clock{
            position: relative;
            width: 400px;
            height:400px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 70px;
        }
        .clock-container{
            position: relative;
            width: 400px;
            height:400px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 70px;
            background-color: white;
            border-radius: 50%;
        }
        .clock > img{
            height: 400px;
            width: 400px;
        }
        .hand{
            position: absolute;
            top: 50%;
            width:40%;
            left: 10%;
            transform-origin: 100%;
            transform: rotate(180deg);
            height:5px;
            background-color: black;
          z-index:10;

        }
        .cap{
            position: absolute;
            height:15px;
            width:15px;
            border-radius: 50%;
            background-color: black;
            left: 48.5%;
            top: 48.5%;
        }
        .second{
            height: 1px;
            background-color: red;
        }
        .hour{
            width: 100px;
            left: 100px;
            transform: rotate(30deg);
        }
        div[class$=time]{
            position: relative;
            height:40px; width: 40px;
            border-radius: 50%;
        }
        div[class$=time] > img{
            height: 50px;
            width: 50px;

        }
        div[class$=time] > .i-hand{
            position: absolute;
            top: 61.5%;
            width:50%;
            left: 5px;
            transform-origin: 100%;
            transform: rotate(10deg);
            height:1px;
            background-color: black;

        }
        .i-cap{
            position: absolute;
            height:3px;
            width:3px;
            border-radius: 50%;
            background-color: black;
            left: 59%;
            top: 58%;
        }
        .mountain-time{
            left:25%;
            top:-320px;
        }
        .central-time{
            left:60%;
            top:-300px;
        }
        .pacific-time{
            left:40%;
            top:-200px;
        }
        div[class$=time]>.second{
            height:0.5px;
            background-color: red;
        }
        div[class$=time]>.hour{
            height:1.5px;

        }
        div[class$=time]>.min{
            height:1.5px;

        }
        .clock .glass{
            position: absolute;
            background-color: lightskyblue;
            opacity: .2;
            width: 400px;
            height:400px;
            top: 0;
            border-radius: 50%;
        }
        .bevel{
            position: absolute;
            height:400px; width: 400px;
            border: 10px solid silver;
            border-radius: 50%;
            top:-10px;
            left: -10px;
        }
        .left-band{
            position: absolute;
            height: 200px;
            width:140vw;
            background-color: black;
            top: 100px;
            z-index: -1;
            left: -110%;
            right: 100%;
        }
        .holes{
            position: absolute;
            height: 20px;
            width: 300px;
            background-color: black;
            right: -140%;
            top: 190px;


        }
        div[class^='hole-']{
            display: inline-block;
            height: 8px;
            width: 8px;
            background-color: silver;
            margin-left: 20px;
            border-radius: 50%;
        }
        .i-bevel{
            position: absolute;
            height:50px; width:50px;
            border: 1px solid silver;
            border-radius: 50%;
            top:-1.5px;
            left: -1.5px;
        }


/*Downloaded from https://www.codeseek.co/lov4code/javascript-and-css-watch-with-4-time-zones-KavWKx */
    function setDate(){
        const hourHand = document.querySelector('.hour');
        const minuteHand = document.querySelector('.minute');
        const secondHand = document.querySelector('.second');

        // central time
        const ct = document.querySelector('.central-time');
        const ct_hourHand = ct.querySelector('.hour');
        const ct_minuteHand = ct.querySelector('.minute');
        const ct_secondHand = ct.querySelector('.second');

        // mountain time
        const mt = document.querySelector('.mountain-time');
        const mt_hourHand = mt.querySelector('.hour');
        const mt_minuteHand = mt.querySelector('.minute');
        const mt_secondHand = mt.querySelector('.second');

        // pacific time
        const pt = document.querySelector('.pacific-time');
        const pt_hourHand = pt.querySelector('.hour');
        const pt_minuteHand = pt.querySelector('.minute');
        const pt_secondHand = pt.querySelector('.second');

        const now = new Date();
        const minute = now.getMinutes();
        const seconds = now.getSeconds();
        const hour = now.getHours();

        const updatedMinute = ((minute / 60)*360)+90;
        const updatedHour = ((hour / 12)*360)+90;
        const updatedSecond = ((seconds / 60)*360)+90;

        // central time
        const ct_updatedHour = ((((hour - 1 )/ 12))*360)+90;

        // mountaint time
        const mt_updatedHour = ((((hour - 2 )/ 12))*360)+90;

        // pacific time
        const pt_updatedHour = ((((hour - 3 )/ 12))*360)+90;

        hourHand.style.transform = `rotate(${updatedHour}deg)`;
        minuteHand.style.transform = `rotate(${updatedMinute}deg)`;
        secondHand.style.transform = `rotate(${updatedSecond}deg)`;

        // central time
        ct_hourHand.style.transform = `rotate(${ct_updatedHour}deg)`;
        ct_minuteHand.style.transform = `rotate(${updatedMinute}deg)`;
        ct_secondHand.style.transform = `rotate(${updatedSecond}deg)`;

        // mountain time
        mt_hourHand.style.transform = `rotate(${mt_updatedHour}deg)`;
        mt_minuteHand.style.transform = `rotate(${updatedMinute}deg)`;
        mt_secondHand.style.transform = `rotate(${updatedSecond}deg)`;

        // pacific time
        pt_hourHand.style.transform = `rotate(${pt_updatedHour}deg)`;
        pt_minuteHand.style.transform = `rotate(${updatedMinute}deg)`;
        pt_secondHand.style.transform = `rotate(${updatedSecond}deg)`;
    }
    setInterval(setDate, 1000);

Comments