2
\$\begingroup\$

This is a POC for a clock using moment.js, eventually I plan to recreate this in Raect.js. Any opimisations or a better way to do it?

<!DOCTYPE html>
<html>
<head>
    <title>Html clock</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.5/moment-timezone-with-data.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<p id='show_time'></p>
<p id='show_date'></p>
<select id='timezone_list'></select>
    <script type="text/javascript">
        var list = moment.tz.names();
        var timezone;
        var sel = document.getElementById('timezone_list');
        for(var i = 0; i < list.length; i++) {
            var opt = document.createElement('option');
            opt.innerHTML = list[i];
            opt.value = list[i];
            sel.appendChild(opt);
        }

        sel.onchange = function(){
            timezone=sel.options[sel.selectedIndex].text;
            console.log(timezone)
            setInterval(function(){
                var times = moment().tz(timezone).format('h:mm:ss a');
                var dates = moment().tz(timezone).format('MMMM Do YYYY');
                var par = document.getElementById('show_time');
                var par2 = document.getElementById('show_date');
                par.innerHTML= times;
                par2.innerHTML=dates;
            },1000);
        }
    </script>
</body>

\$\endgroup\$
3
\$\begingroup\$
  • I have created a function to prevent the one second delay.
  • Added moment().tz(timezone) as variable
  • Added all elements as variable
  • Added the date and time directly to the elements
  • Added a shorter way to add options

var list = moment.tz.names();
var timezone;

// elements
var elTimezoneList = document.getElementById('timezone_list');
var elTime = document.getElementById('show_time');
var elDate = document.getElementById('show_date');

// loop over timezones and set options
for(var i = 0; i < list.length; i++) {
   elTimezoneList.appendChild(new Option(list[i], list[i]));
}

// time function to prevent the 1s delay
var setTime = function() {
  var time = moment().tz(timezone);

  // set time in html
  elTime.innerHTML= time.format('h:mm:ss a');

  // set date in html
  elDate.innerHTML = time.format('MMMM Do YYYY');
}

// on change select
elTimezoneList.onchange = function(){
  // set selected timezone
  timezone = elTimezoneList.options[elTimezoneList.selectedIndex].text;

  setTime();
  setInterval(setTime, 1000);
}
<!DOCTYPE html>
<html>
  <head>
    <title>Html clock</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.5/moment-timezone-with-data.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
  </head>
  <body>
    <p id="show_time"></p>
    <p id="show_date"></p>
    <select id="timezone_list"></select>
  </body>
</html>

| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.