// Sets the inner contents of an HTML element identified by `listId` to a list

// of the next 24 hours starting from the current hour

//

//  Example:

//

//    <ol id="hour-list"></ol>

//    <script>listHours('foo-list')</script>

//    <ol id="hour-list"><li>12am</li><li>...</li></ol>

function listHours(listId) {

  // Get the current hour from a new Date object

  var currentHour = (new Date()).getHours();

  // An array to store the list items we generate

  var hourList = [];

  // Iterate through 24 hours starting from the current hour and add the list

  // items to the hour list

  var i = 0;

  while(i < 24) {

    var h = (currentHour + i) % 24;

    hourList.push('<li>' + formatHour(h) + '</li>');

    i++;

  }

  // Combine the list items and add them to element targeted by `listId`

  document.getElementById(listId).innerHTML = hourList.join('');

}

​

// Formats an hour (0-23) to an AM/PM format.

//

// Examples:

//

//  formatHour(0)   // => '12am'

//  formatHour(1)   // => '1am'

//  formatHour(13)  // => '1pm'

//  formatHour(23)  // => '11pm'

function formatHour(hour) {

  var fmtHour;

  if (hour === 0) {

    fmtHour = 12;

  } else if (hour > 12) {

    fmtHour = hour - 12;

  } else {

    fmtHour = hour;

  }

  var ampm = hour < 12 ? 'am' : 'pm';

  return fmtHour + ampm;

}

​

​

listHours('hour-list');