'Three time zone clocks (PST, GMT & CST)

I have three different time zone clocks (PST, GMT & CST), I have already done PST as that is my current time zone but I cannot figure out how to do it for the other two (GMT & CST)? I am not sure if I have to do it with offset or just have another function doing it, please help. And sorry for spamming at the end because it was not letting me post without providing more information. Thank you Here is the code:

setInterval(setClock, 1000)

const hourHand = document.querySelector('[hour-hand]')
const minuteHand = document.querySelector('[minute-hand]')
const secondHand = document.querySelector('[second-hand]')

function setClock() {
  const todayDate = new Date()
  const secondsRatio = todayDate.getSeconds() / 60
  const minutesRatio = (secondsRatio + todayDate.getMinutes()) / 60
  const hoursRatio = (minutesRatio + todayDate.getHours()) / 12
  setRotation(secondHand, secondsRatio)
  setRotation(minuteHand, minutesRatio)
  setRotation(hourHand, hoursRatio)
}

function setRotation(element, rotationRatio) {
  element.style.setProperty('--rotation', rotationRatio * 360)
}

setClock()

#headerStyle{
padding:5px 5px 5px 7px;
font-size:13px;
font-family:arial,helvetica,sans-serif;
color: white;
text-shadow: 2px 2px black;
}
                                            
*, *::after, *::before {
 box-sizing: border-box;
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

body {
 background: linear-gradient(to right, hsla(206, 99%, 67%, 0.733), rgba(0, 166, 255, 0.042));
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;


}

.clock {
  width: 300px;
  height: 300px;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 50%;
  border: 2px solid black;
  position: relative;
}

.clock .number {
  --rotation: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transform: rotate(var(--rotation));
  font-size: 1.5rem;
}

.clock .number1 { --rotation: 30deg; }
.clock .number2 { --rotation: 60deg; }
.clock .number3 { --rotation: 90deg; }
.clock .number4 { --rotation: 120deg; }
.clock .number5 { --rotation: 150deg; }
.clock .number6 { --rotation: 180deg; }
.clock .number7 { --rotation: 210deg; }
.clock .number8 { --rotation: 240deg; }
.clock .number9 { --rotation: 270deg; }
.clock .number10 { --rotation: 300deg; }
.clock .number11 { --rotation: 330deg; }

.clock .hand {
  --rotation: 0;
  position: absolute;
  bottom: 50%;
  left: 50%;
  background-color: black;
  border: 1px solid white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transform-origin: bottom;
  z-index: 10;
  transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
}

.clock::after {
 content: '';
 position: absolute;
 background-color: black;
 z-index: 11;
 width: 15px;
 height: 15px;
 top: 45%;
 left: 50%;
 transform: translate(-50%, 50%);
 border-radius: 50%;
}

.clock .hand.second {
width: 3px;
height: 45%;
background-color: red;
}

.clock .hand.minute {
width: 7px;
height: 40%;
background-color: black;
}

.clock .hand.hour {
width: 10px;
height: 35%;
background-color: black;
}

#wrapperone {
  width: 1920px
}

#titlestyles {
  padding: 10px;
  color: blue;
}


#titlestyles2 {
  padding: 10px;
  color: blue;

  }
header, nav {
display:block;
text-align:center;
}

<!DOCTYPE html>
<html lang="eng">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="style.css" rel="stylesheet">
    <script defer src="script.js"></script>
    <title>Clock</title>
  </head>
  <body>
      <header id="headerStyle">
        <h3>Timezone Clocks</h3>
      </header>
    <h1 id="titlestyles"> PST </h1>
    <div class="clock">
        <div class="hand hour" hour-hand></div>  
        <div class="hand minute" minute-hand></div>  
        <div class="hand second" second-hand></div>
        <div class="number number1">1</div>
        <div class="number number2">2</div>
        <div class="number number3">3</div>
        <div class="number number4">4</div>
        <div class="number number5">5</div>
        <div class="number number6">9</div>
        <div class="number number7">7</div>
        <div class="number number8">8</div>
        <div class="number number9">9</div>
        <div class="number number10">10</div>
        <div class="number number11">11</div>
        <div class="number number12">12</div>
    </div>
    
    <h1 id="titlestyles"> GMT </h1>
    <div class="clock">
        <div class="hand hour" hour-hand></div>  
        <div class="hand minute" minute-hand></div>  
        <div class="hand second" second-hand></div>
        <div class="number number1">1</div>
        <div class="number number2">2</div>
        <div class="number number3">3</div>
        <div class="number number4">4</div>
        <div class="number number5">5</div>
        <div class="number number6">9</div>
        <div class="number number7">7</div>
        <div class="number number8">8</div>
        <div class="number number9">9</div>
        <div class="number number10">10</div>
        <div class="number number11">11</div>
        <div class="number number12">12</div>
    </div>

    <h1 id="titlestyles"> EST </h1>
    <div class="clock">
        <div class="hand hour" hour-hand></div>  
        <div class="hand minute" minute-hand></div>  
        <div class="hand second" second-hand></div>
        <div class="number number1">1</div>
        <div class="number number2">2</div>
        <div class="number number3">3</div>
        <div class="number number4">4</div>
        <div class="number number5">5</div>
        <div class="number number6">9</div>
        <div class="number number7">7</div>
        <div class="number number8">8</div>
        <div class="number number9">9</div>
        <div class="number number10">10</div>
        <div class="number number11">11</div>
        <div class="number number12">12</div>
    </div>
  </body>
</html>

javascript time

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Three time zone clocks (PST, GMT & CST)

Sources

Related Questions