JSFiddle - React, Tailwind, and code Playground

by John Barker

HTML

<div id="showtimes"></div>
<div id="showtimesB"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>


<div id="timer-clock"><div id="countdown"></div></div>
<div id="timer-clock"><div id="countdown2"></div></div>

CSS

#showtimes ul {
  list-style-type: none;
}

.expiredshow {
  text-decoration: line-through;
}

.in3D:after {
  content: '3D';
  margin-left: 5px;
  padding: 2px;
  color: blue;
  background-color: #e8e8e8;
}

.hasWC:after {
  content: 'WC';
  margin-left: 5px;
  padding: 2px;
  color: Green;
  background-color: #e8e8e8;
}

.noWC:after {
  content: 'WC';
  margin-left: 5px;
  text-decoration: line-through;
  padding: 2px;
  color: Green;
  background-color: #e8e8e8;
}

.hasVIP:after {
  content: 'VIP';
  margin-left: 5px;
  padding: 2px;
  color: Red;
  background-color: #e8e8e8;
}

.in2D:after {
  content: '2D';
  margin-left: 5px;
  padding: 2px;
  background-color: #e8e8e8;
}

JavaScript

// head
var xmlhttp = new XMLHttpRequest();
var url = "https://ritz-multiplex-cinema.squarespace.com/assets/json-showtimes.json";

xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    var myArr = JSON.parse(xmlhttp.responseText);
    ritzShowtimes(myArr, rentraks, showtimes);
  }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

function ritzShowtimes(arr, rentraks, showtimes) {
  var output = "";
  var thisHere = "";
  var thatThere = "ThatThere";
  var i;
  var j;
  var y;
  var todaysDate = new Date().toISOString().slice(0, 10);
  var timeRightNow = new Date().toTimeString().split(' ')[0];
  //  var momentDay1 = moment().format('YYYY-MM-DD');
  //  var momentDay2 = moment().add(1, 'days').format('YYYY-MM-DD');
  //  var momentDay3 = moment().add(2, 'days').format('YYYY-MM-DD');
  //  var momentDay4 = moment().add(3, 'days').format('YYYY-MM-DD');

  function sortingDate(json_object, key_to_sort_by) {
    function sortByDate(a, b) {
      var x = a[key_to_sort_by];
      var z = b[key_to_sort_by];
      return ((x < z) ? -1 : ((x > z) ? 1 : 0));
    }
    json_object.sort(sortByDate);
  }

  for (j = 0; j < arr.length; j++) {
    arr[j].PerformanceNumberSlot = arr[j].PerformanceNumberSlot.replace("None", arr[j].PerformDate + '' + arr[j].StartTime);
    sortingDate(arr, "PerformanceNumberSlot");
  }

  for (i = 0; i < arr.length; i++) {
    arr[i].StartTime = arr[i].StartTime.replace("0:00", "0");
    arr[i].StartTime = arr[i].StartTime.replace("00:01:00", "00:01")
    arr[i].Is3d = arr[i].Is3d.replace("Y", "in3D")
    arr[i].WheelchairAccessible = arr[i].WheelchairAccessible.replace("Y", "hasWC")
    arr[i].WheelchairAccessible = arr[i].WheelchairAccessible.replace("N", "noWC")
    arr[i].ShortFilmTitle = arr[i].ShortFilmTitle.replace(/\W2D/g, " in2D")
    arr[i].ShortFilmTitle = arr[i].ShortFilmTitle.replace(/\W3D/g, " in3D")
    arr[i].ScreenCode = arr[i].ScreenCode.replace("1", "hasVIP")

    if...