<div class="card" data-timezone="Asia/Tokyo">
	<div class="town">
		<h2>TOKIO</h2>
		<span class="icon"><img src="" alt=""></span>
	</div>
	<div class="data">
		<p class="time-message"></p>
		<p class="city-time"></p>
	</div>
</div>
<div class="card" data-timezone="America/New_York">
	<div class="town">
		<h2>NEW YORK</h2>
		<span class="icon"><img src="" alt=""></span>
	</div>
	<div class="data">
		<p class="time-message"></p>
		<p class="city-time"></p>
	</div>
</div>
<div class="card" data-timezone="America/Los_Angeles">
	<div class="town">
		<h2>LOS ANGELES</h2>
		<span class="icon"><img src="" alt=""></span>
	</div>
	<div class="data">
		<p class="time-message"></p>
		<p class="city-time"></p>
	</div>
</div>

<div class="card" data-timezone="Europe/London">
	<div class="town">
		<h2>LONDON</h2>
		<span class="icon"><img src="" alt=""></span>
	</div>
	<div class="data">
		<p class="time-message"></p>
		<p class="city-time"></p>
	</div>
</div>
<div class="card" data-timezone="Australia/Sydney">
	<div class="town">
		<h2>SYDNEY</h2>
		<span class="icon"><img src="" alt=""></span>
	</div>
	<div class="data">
		<p class="time-message"></p>
		<p class="city-time"></p>
	</div>
</div>
<div class="card" data-timezone="Asia/Kolkata">
	<div class="town">
		<h2>Mumbai</h2>
		<span class="icon"><img src="" alt=""></span>
	</div>
	<div class="data">
		<p class="time-message"></p>
		<p class="city-time"></p>
	</div>
</div>
/* GLOBAL RESET */
body {
	margin: 0;
	padding: 0;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	line-height: 1;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* STYLE */
.card {
	border: 1px solid #e6e6e6;
	border-radius: 4px;
	background-color: #fff;
	padding: 1rem;
	margin-bottom: 0.5rem;
	padding: 2rem;
}

.town {
	display: flex;
	justify-content: space-between;
	align-items: center;

	position: relative;
	overflow: hidden;
}

.icon img {
	width: 64px;
	height: 64px;
}

.city-time {
	font-weight: 700;
}
const icons = [
	"https://uploads-ssl.webflow.com/651081e1256c06db0b1b9800/6510b431109f7d930d51f29a_morning.svg",
	"https://uploads-ssl.webflow.com/651081e1256c06db0b1b9800/6510b43089d03d0e8a8334fe_day.svg",
	"https://uploads-ssl.webflow.com/651081e1256c06db0b1b9800/6510b430ed1e0a83e7d74da7_evening.svg",
	"https://uploads-ssl.webflow.com/651081e1256c06db0b1b9800/65108202d0667ea6b718a11f_night.svg"
];

const OPEN_MESSAGE = "Welcome, we are open";
const EVENING_MESSAGE = "Good evening, unfortunately is after closing hour";
const NIGHT_MESSAGE = "Goodnight, See you tomorrow";
const EARLY_MESSAGE = "It's Early, we will open soon";

const OPENING_HOUR = 9;
const CLOSING_HOUR = 17;

let timeHolders = document.querySelectorAll("[data-timezone]");

const formatAMPM = (date) => {
	// return in 12 hour format
	let hours = date.getHours();
	let minutes = date.getMinutes();
	const ampm = hours >= 12 ? "PM" : "AM";
	hours = hours % 12;
	hours = hours ? hours : 12; // the hour '0' should be '12'
	minutes = minutes < 10 ? "0" + minutes : minutes;
	const timeString = `${hours}<span class="blink">:</span>${minutes} ${ampm}`;
	return timeString;
};

// return message based on current city time
const timeBasedMessage = (time) => {
	// if current time coincides with opening
	if (time >= OPENING_HOUR && time < CLOSING_HOUR) {
		return OPEN_MESSAGE;
	} // time is between closing and night
	else if (time >= CLOSING_HOUR && time < 21) {
		return EVENING_MESSAGE;
	} // time is between night and opening
	else if (time >= 21 && time < 24) {
		return NIGHT_MESSAGE;
	} else if (time < OPENING_HOUR) {
		return EARLY_MESSAGE;
	} else {
		return "";
	}
};

const addTimeAndMessage = () => {
	[...timeHolders].forEach((holder) => {
		const dateInTimezone = (date = new Date()) => {
			return new Date(
				date.toLocaleString("en-US", { timeZone: holder.dataset.timezone })
			);
		};
		const iconHolder = holder.querySelector("img");
		const timeInCity = dateInTimezone(new Date());
		const message = timeBasedMessage(
			dateInTimezone(new Date(), holder.dataset.timezone).getHours()
		);
		holder.querySelector(".time-message").innerText = message;
		holder.querySelector(".city-time").innerHTML = formatAMPM(timeInCity);
		changeData(message, holder, iconHolder);
	});
};

function changeData(message, holder, iconHolder) {
	if (message === OPEN_MESSAGE) {
		holder.style.backgroundImage = "linear-gradient(to right, #466ac7, #7394e7 )";
		holder.style.color = "#fff";
		iconHolder.src = icons[1];
		iconHolder.alt = "day icon";
	} else if (message === EVENING_MESSAGE) {
		holder.style.backgroundImage =
			"linear-gradient(to right, #ff9966, #d94144, #1a1b2e )";
		holder.style.color = "#fff";
		iconHolder.src = icons[2];
		iconHolder.alt = "night icon";
	} else if (message === NIGHT_MESSAGE) {
		holder.style.backgroundImage =
			"linear-gradient(to right, #1a1b2e , #2c4048 )";
		holder.style.color = "#fff";
		iconHolder.src = icons[2];
		iconHolder.alt = "night icon";
	} else {
		holder.style.backgroundImage =
			"linear-gradient(to right, #1a1b2e , #6c8ee3 )";
		holder.style.color = "#fff";
		iconHolder.src = icons[0];
		iconHolder.alt = "morning icon";
	}
}
addTimeAndMessage();

setInterval(addTimeAndMessage, 60 * 1000);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.