<header>
  <h2 class="title">Date.prototype.getUTCHours()</h2>
  <p class="description">Отримує годину поточної дати згідно з універсальним координованим часом (UTC).</p>
</header>
<main>
  <div class="result">
    <p>Чи зараз робочий час у:</p>
    <div>Лондон: <span id="londonStatus">...</span></div>
    <div>Нью-Йорк: <span id="nyStatus">...</span></div>
    <div>Токіо: <span id="tokyoStatus">...</span></div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

div.result div {
  margin-bottom: 15px;
}

function isWorkingHours(cityUtcOffset) {
  const currentDate = new Date();
  const utcHour = currentDate.getUTCHours();
  const cityHour = (utcHour + cityUtcOffset) % 24;

  // Робочий час вважаємо з 9 до 17.
  return cityHour >= 9 && cityHour < 17;
}

function refreshWorkStatus() {
  document.getElementById("londonStatus").textContent = isWorkingHours(0) ? "Так" : "Ні";  // Лондон має UTC+0
  document.getElementById("nyStatus").textContent = isWorkingHours(-5) ? "Так" : "Ні";    // Нью-Йорк має UTC-5
  document.getElementById("tokyoStatus").textContent = isWorkingHours(9) ? "Так" : "Ні";  // Токіо має UTC+9
}

// Виводимо статус робочого часу при завантаженні сторінки.
refreshWorkStatus();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.