internship_node/day17/views/timezone.ejs

<%- include('partials/header') %>
<div class="calendar-container">
  <div class="calendar-header">Calendar</div>
  <div class="calendar-content">
    <div class="calendar-labels">
      <div class="calendar-label-main">Pick a date and time</div>
      <div class="calendar-label-duration">Duration: <span>1 hour</span></div>
      <div class="calendar-label-timezone">
        Your timezone:
        <button id="select-timezone-btn" class="timezone-btn">
          Please Select
        </button>
      </div>
    </div>
    <!-- Modal Overlay -->
    <div id="timezone-modal" class="modal-overlay" style="display: none">
      <div class="modal-content">
        <div class="modal-title">TIME ZONE</div>
        <div class="modal-format-switch">
          <label
            ><input type="radio" name="format" value="ampm" checked />
            am/pm</label
          >
          <label><input type="radio" name="format" value="24hr" /> 24hr</label>
        </div>
        <div class="timezone-groups">
          <% for (const group in timezoneGroups) { %>
          <div class="timezone-group">
            <div class="timezone-group-title"><%= group %></div>
            <% timezoneGroups[group].forEach(function(tz) { %>
            <label class="timezone-option">
              <input type="radio" name="timezone" value="<%= tz.name %>" />
              <span
                class="tz-time"
                data-am="<%= tz.time_am %>"
                data-24="<%= tz.time_24 %>"
              >
                <%= tz.label %>
                <span class="tz-time-value"><%= tz.time_am %></span>
              </span>
            </label>
            <% }) %>
          </div>
          <% } %>
        </div>
      </div>
    </div>
  </div>
</div>
<%- include('partials/footer') %>
<script>
  // Modal logic
  const btn = document.getElementById("select-timezone-btn");
  const modal = document.getElementById("timezone-modal");
  btn.onclick = () => {
    modal.style.display = "flex";
  };
  modal.onclick = (e) => {
    if (e.target === modal) modal.style.display = "none";
  };
  document.querySelectorAll('input[name="timezone"]').forEach((el) => {
    el.onclick = () => {
      window.location.href = "/calendar?tz=" + encodeURIComponent(el.value);
    };
  });

  // Time format toggle logic
  document.querySelectorAll('input[name="format"]').forEach((el) => {
    el.onchange = function () {
      const is24 = this.value === "24hr";
      document.querySelectorAll(".tz-time").forEach((span) => {
        const am = span.getAttribute("data-am");
        const t24 = span.getAttribute("data-24");
        span.querySelector(".tz-time-value").textContent = is24 ? t24 : am;
      });
    };
  });
</script>