Okay so I have a feature I’m working on for a new site where I need to display current time for both East Coast and West Coast. It needs to be display in the following way:
NY 11:24:21 PM
CA 08:24:21 PM
Thus far I’ve managed to get the time zones to start displaying but I need to make sure they both are pointing specifically only to EST & PST and that they are displaying inside the proper html blocks. I also need the AM/PM to wrap inside a html block.
Here is my sample code:
function showTime() {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
let formatHours = convertFormat(hours)
hours = checkTime(hours)
hours = addZero(hours)
minutes = addZero(minutes)
seconds = addZero(seconds)
let format = `NY ${hours}:${minutes}:${seconds} <small class="font-medium">${formatHours}</small>`
let pstDate = date.toLocaleTimeString("en-US", {timeZone: "America/Los_Angeles"}, {timeStyle: 'short'})
// Output Times
$('.time-ny').html(format);
$('.time-ca').html(pstDate);
}
function convertFormat(time) {
let formmat = 'PM'
if (time >= 12) {
format = 'AM'
}
return formmat;
}
function checkTime(time) {
if (time > 12) {
time = time - 12;
}
if (time === 0) {
time = 12;
}
return time
}
function addZero(time) {
if (time < 10) {
time = "0" + time;
}
return time
}
showTime()
setInterval(showTime, 1000)
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #000000;
flex-direction: column;
}
.clock {
font-family: sans-serif;
font-size: 1rem;
color: #fff;
}
.font-medium {
font-weight: 500;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clock time-ny"></div>
<div class="clock time-ca"></div>
Any help from you real JS coders would be super appreciated. I dabble in this stuff but it will never be my bread and butter.