Lesson 3 - Learning construction - Step 3

by nathanesa

HTML

<p id='clock'></p>

CSS

/* Google font */
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

body {
  background-color: slategrey;
  text-align: center;
}

#clock {
  padding: 10px;
  background-color: black;
  width: 40%;
  margin: auto;
  color: lightblue;
  font-size: 60px;
  font-family: 'Orbitron', sans-serif;
  border: 20px solid tan;
  border-radius: 10px;
}

JavaScript

// Update the seconds, minutes and hours.
function updateClock() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = formatMinutes(m);  
  s = formatSeconds(s);  
  document.getElementById('clock').innerHTML = h + ':' + m + ":" + s;
  setTimeout(updateClock, 1000);
}

// Add a 0 to the front of the minutes if less than 10.
function formatMinutes(minutes) {
  if (minutes < 10) {
    let formattedMinutes = '0' + minutes;
    return formattedMinutes
  }
  return minutes;
}

// Add a 0 to the front of the seconds if less than 10.
function formatSeconds(seconds) {
  if (seconds < 10) {
    let formattedSeconds = '0' + seconds;
    return formattedSeconds
  }
  return seconds;
}

updateClock();