Refactoring digital clock - JavaScript ES5 Functional Programming

Question

I'm making a digital clock with ES5 ( no arrow stuff and so ). The location and temperature I'll do later. How can I improve/refactor the current code that I have with functional programming?

CodePen: https://codepen.io/Aurelian/pen/opaxqx?editors=1010

This is the HTML:

<div class="clock">
<div class="clock-ram">
<div class="clock-display">


  <div class="clock-location">United Kingdom, Manchester</div>

  <div class="clock-main">
    <div class="clock-time"></div>

    <div class="clock-widgets">
      <div class="clock-widget clock-date"></div>
      <div class="clock-widget clock-day"></div>
      <div class="clock-widget clock-temperature">NAN</div>
    </div> 
  </div><!-- /clock-main -->

  <ul class="clock-weekdays">

  </ul>


</div><!-- /display -->
</div><!-- /ram -->
</div> <!-- /clock -->

This is the JS:

// Get te location
// Make the : blink

//var location = document.querySelector('.clock-location');

function abbrev(a,b) {
  return a.substr(0,b);
}

 function checkTime(i) {
      if (i < 10) {
        i = "0" + i
      };
      return i;
  }


function displayTime() {

  var clockTime = document.querySelector('.clock-time');
  var clockDate = document.querySelector('.clock-date');
  var clockDay = document.querySelector('.clock-day');
  var clockWeekdays = document.querySelector('.clock-weekdays');
  while(clockWeekdays.firstChild) clockWeekdays.removeChild(clockWeekdays.firstChild);

  var date = new Date();

  var weekday = new Array(7);
  weekday[0] = "Sunday";
  weekday[1] = "Monday";
  weekday[2] = "Tuesday";
  weekday[3] = "Wednesday";
  weekday[4] = "Thursday";
  weekday[5] = "Friday";
  weekday[6] = "Saturday";

  var monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];


  var singleDay = [];

  for (var i = 0; i < weekday.length; i++) {
    var day = weekday[i];
    var li = document.createElement('li');
    li.textContent = abbrev(day,3);
    if (i === date.getDay()) {
        li.classList.add('active');
    }
    clockWeekdays.appendChild(li);
  }

  // Mechanics
  var todayDay = weekday[date.getDay()];
  var h = date.getHours();
  var m = checkTime(date.getMinutes());
  var s = checkTime(date.getSeconds());

  var year = date.getFullYear();
  var month = date.getMonth();

  // Display
  clockDay.textContent = abbrev(todayDay,3);
  clockTime.textContent = h + ":" + m + ":" + s;
  clockDate.textContent = monthNames[month] + " / " +  year;

}

window.setInterval(displayTime, 1000);


//displayTime();

// Get the time

//Loop Throw weekdays - show 3 letters

CodePen: https://codepen.io/Aurelian/pen/opaxqx?editors=1010

Answer 1

You have almost everything in a single function, displayTime.

I'd start by refactoring the date-to-string manipulations into separate functions and leaving only DOM manipulation code in displayTime:

// qs :: String -> Element
// formatTime :: Date -> String
// formatYearMonth :: Date -> String
function displayTime() {
  let date = new Date();
  // handle weekdays here
  qs('.clock-time').textContent = formatTime(date);
  qs('.clock-date').textContent = formatYearMonth(date);
}

formatTime would be more readable IMO if we named your checkTime function zeroPad and used mm/ss for double-digit strings:

function formatTime(date) {
  let zeroPad = (i) => ((i < 10) ? "0" : "") + i; // I know you said no arrow functions, but I can't resist

  let h = date.getHours();
  let mm = zeroPad(date.getMinutes());
  let ss = zeroPad(date.getSeconds());
  return `${h}:${mm}:${ss}`;
}

The weekday indicators can be created once and only get updated as necessary. This makes it obvious what part is dynamic:

let weekdayLIs = Array.from(qs('.clock-weekdays').children);
// I'm no fond of using the index here, can be changed to inspect the <li>
function isCurrentWeekday(idx) { return idx === date.getDay(); }

weekdayLIs.forEach((li, idx) => {
  li.classList.toggle('active', isCurrentWeekday(idx));
});

I'm not sure what's the point of displaying the current weekday in two places, but if you insist:

qs('.clock-day').textContent = weekdayLIs.find((li,idx) => isCurrentWeekday(idx)).textContent;

As for creating the <li>s corresponding to the weekdays, you can simply list them in HTML; this has the benefit of having all the structure defined in one place:

  <ul class="clock-weekdays">
    <li>Sun</li><li>Mon</li><li>Tue</li><li>Wed</li><li>Thu</li><li>Fri</li><li>Sat</li>
  </ul>

https://codepen.io/anon/pen/zpyRjm?editors=1010