<h3>
 
</h3>

/* Time format: "10:20:40 AM"
1. Figure out how to get Time in JavaScript (https://www.toptal.com/software/definitive-guide-to-datetime-manipulation)
2. Phase them according to the format shown above
3. Put them in a variable (timeString)
4. Find the h1 tag, and put the timeString variable as the content of h1
5. Put them in a loop, so it will keep updating
*/

printOutCurrentTimeAndUpdateInASecond();

function printOutCurrentTimeAndUpdateInASecond() {
  var date = new Date();

  var hour = date.getHours(),
    minute = giveItA0(date.getMinutes()),
    second = giveItA0(date.getSeconds()),
    ampm = amORpm(hour);

  // Got the time string
  var timeString = `${giveItA0(
    in12HourFormat(hour)
  )}:${minute}:${second} ${ampm}`;

  // Append it on the H3 tag
  var h3tag = document.getElementsByTagName("h3")[0];
  h3tag.innerText = timeString;

  setTimeout(printOutCurrentTimeAndUpdateInASecond, 1000);

  // --- functions ----

  // Ignore whatever happened after this
  function giveItA0(input) {
    if (input < 10) {
      return "0" + input;
    } else {
      return input;
    }
    // return (input < 10) ? ("0"+input) : input
  }

  function amORpm(hour) {
    if (hour <= 12) {
      return "AM";
    } else {
      return "PM";
    }
  }

  function in12HourFormat(hour) {
    if (hour > 12) {
      return hour - 12;
    } else {
      return hour;
    }
  }
}