moment timezone test

Playing around with Immutable.js library.

by Nalin Sajwan

HTML

<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data.min.js"></script>
<section>
  <h3 id="first-section">Bee and Pe 👩🏻‍❤️‍💋‍👨🏻 (Countdown)</h3>
  <table>
    <tr>
      <th>Today (in melbourne)</th>
      <td id="mel-time"></td>
    </tr>
    <tr>
      <th>Today (in vietnam)</th>
      <td id="vietnam-time"></td>
    </tr>
    <tr>
      <th>Ho Chi minh (landing time)</th>
      <td id="ho-chi-min-landing-time"></td>
    </tr>
    <tr>
      <th>Hanoi (landing time)</th>
      <td id="hanoi-landing-time"></td>
    </tr>
  </table>
</section>
<section>
  <h3 id="second-section">Bee arrives (in Ho Chi minh) 😎 (Countdown)</h3>
  <table>
    <tr>
      <th>Days</th>
      <td id="ho-chi-minh-days"></td>
    </tr>
    <tr>
      <th>Hours</th>
      <td id="ho-chi-minh-hours"></td>
    </tr>
    <tr>
      <th>Minutes</th>
      <td id="ho-chi-minh-minutes"></td>
    </tr>
    <tr>
      <th>Seconds</th>
      <td id="ho-chi-minh-seconds"></td>
    </tr>
  </table>
</section>
<section>
  <h3 id="third-section">Bee meets Pe (in hanoi) 💋 (Countdown)</h3>
  <table>
    <tr>
      <th>Days</th>
      <td id="hanoi-days"></td>
    </tr>
    <tr>
      <th>Hours</th>
      <td id="hanoi-hours"></td>
    </tr>
    <tr>
      <th>Minutes</th>
      <td id="hanoi-minutes"></td>
    </tr>
    <tr>
      <th>Seconds</th>
      <td id="hanoi-seconds"></td>
    </tr>
  </table>
</section>

CSS

table {
    border: solid 1px #aad5d5;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
table tbody th {
    background-color: #DDEFEF;
    border: solid 1px #aad5d5;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
table tbody td {
    border: solid 1px #aad5d5;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}

Babel + JSX

const AU_TIMEZ = 'Australia/Melbourne';
const VIET_TIMEZ = 'Asia/Ho_Chi_Minh';

const today = new Date().toISOString();
const start = moment(today).tz(AU_TIMEZ);
const stop1 = moment("2022-12-16T00:00:00.000Z")
  .tz(VIET_TIMEZ)
  .set({ hour: 8, minute: 30, second: 0, millisecond: 0 });
const end = moment("2022-12-16T00:00:00.000Z")
  .tz(VIET_TIMEZ)
  .set({ hour: 19, minute: 55, second: 0, millisecond: 0 });
  
// Clock section.
document.getElementById('mel-time').innerHTML = start.format('lll');
document.getElementById('vietnam-time').innerHTML = moment(today).tz(VIET_TIMEZ).format('lll');
document.getElementById('ho-chi-min-landing-time').innerHTML = stop1.format('lll');
document.getElementById('hanoi-landing-time').innerHTML = end.format('lll');


setInterval(() => {
	const now = moment(new Date().toISOString());

  // Date diff section.
  document.getElementById('ho-chi-minh-days').innerHTML = stop1.diff(now, 'days');
  document.getElementById('ho-chi-minh-hours').innerHTML = stop1.diff(now, 'hours');
  document.getElementById('ho-chi-minh-minutes').innerHTML = stop1.diff(now, 'minutes');
  document.getElementById('ho-chi-minh-seconds').innerHTML = stop1.diff(now, 'seconds');

  // Date diff section.
  document.getElementById('hanoi-days').innerHTML = end.diff(now, 'days');
  document.getElementById('hanoi-hours').innerHTML = end.diff(now, 'hours');
  document.getElementById('hanoi-minutes').innerHTML = end.diff(now, 'minutes');
  document.getElementById('hanoi-seconds').innerHTML = end.diff(now, 'seconds');
}, 1000);