Refactoring digital clock - JavaScript ES5 Functional Programming 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:

&lt;div class="clock"&gt;
&lt;div class="clock-ram"&gt;
&lt;div class="clock-display"&gt;


  &lt;div class="clock-location"&gt;United Kingdom, Manchester&lt;/div&gt;

  &lt;div class="clock-main"&gt;
    &lt;div class="clock-time"&gt;&lt;/div&gt;

    &lt;div class="clock-widgets"&gt;
      &lt;div class="clock-widget clock-date"&gt;&lt;/div&gt;
      &lt;div class="clock-widget clock-day"&gt;&lt;/div&gt;
      &lt;div class="clock-widget clock-temperature"&gt;NAN&lt;/div&gt;
    &lt;/div&gt; 
  &lt;/div&gt;&lt;!-- /clock-main --&gt;

  &lt;ul class="clock-weekdays"&gt;

  &lt;/ul&gt;


&lt;/div&gt;&lt;!-- /display --&gt;
&lt;/div&gt;&lt;!-- /ram --&gt;
&lt;/div&gt; &lt;!-- /clock --&gt;


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 &lt; 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 &lt; 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
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 -&gt; Element
// formatTime :: Date -&gt; String
// formatYearMonth :: Date -&gt; 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) =&gt; ((i &lt; 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 &lt;li&gt;
function isCurrentWeekday(idx) { return idx === date.getDay(); }

weekdayLIs.forEach((li, idx) =&gt; {
  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) =&gt; isCurrentWeekday(idx)).textContent;


As for creating the &lt;li&gt;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:

  &lt;ul class="clock-weekdays"&gt;
    &lt;li&gt;Sun&lt;/li&gt;&lt;li&gt;Mon&lt;/li&gt;&lt;li&gt;Tue&lt;/li&gt;&lt;li&gt;Wed&lt;/li&gt;&lt;li&gt;Thu&lt;/li&gt;&lt;li&gt;Fri&lt;/li&gt;&lt;li&gt;Sat&lt;/li&gt;
  &lt;/ul&gt;


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