JSFiddle - React, Tailwind, and code Playground

by gabihp30

HTML

<html>
    <head>
        <style>
            * {
                font-family: courier new;
                font-size: 10pt;
            }
            table {
                border-collapse: collapse;
                table-layout: fixed;
                width: 100%;
            }
            tr:first-child,
            td:first-child {
                font-weight: bold;
            }
            td {
                position: relative;
                border: solid 1px gray;
                word-wrap: break-word;
                overflow: hidden;
                text-align: center;
                height: 3em;
                padding: 0.5em;
            }
            tr:hover {
                opacity: 0.75;
                background: #eeeeee;
            }
            td[data-wrong="true"]:before {
                display: block;
                top: 50%;
                left: 50%;
                content: "\d7";
                position: absolute;
                font-size: 60pt;
                font-weight: bold;
                color: red;
                opacity: 0.35;
                transform: translate(-50%, -50%);
            }
            .clickable:hover {
                cursor: pointer;
            }
        </style>

        <!-- not sure how many of these are necessary for the parser to work -->
        <script src="https://unpkg.com/datejs@1.0.0-rc3/src/core/i18n.js"></script>
        <script src="https://unpkg.com/datejs@1.0.0-rc3/src/core/core.js"></script>
        <script src="https://unpkg.com/datejs@1.0.0-rc3/src/core/core-prototypes.js"></script>
        <script src="https://unpkg.com/datejs@1.0.0-rc3/src/core/sugarpak.js"></script>
        <script src="https://unpkg.com/datejs@1.0.0-rc3/src/core/format_parser.js"></script>
        <script src="https://unpkg.com/datejs@1.0.0-rc3/src/core/parsing_operators.js"></script>
        <script src="https://unpkg.com/datejs@1.0.0-rc3/src/core/parsing_translator.js"></script>
        <script...

JavaScript

function Gabriel(time) {
  let post_meridiem = time.match(/p/i) !== null;
  let result;
  time = time.replace(/[^\d:-]/g, '');
  let hours = 0;
  let minutes = 0;
  if (!time) return;
  let parts = time.split(':');
  if (parts.length > 2) time = parts[0] + ':' + parts[1];
  if (parts[0] > 59 && parts.length === 2) time = parts[0];
  if (!parts[0] && parts[1] < 60) minutes = parts[1];
  else if (!parts[0] && parts[1] >= 60) return;
  time = time.replace(/^00/, '24');
  time = parseInt(time.replace(/\D/g, ''));
  if (time >= 2500) return;
  if (time > 0 && time < 24 && parts.length === 1) hours = time;
  else if (time < 59) minutes = time;
  else if (time >= 60 && time <= 99 && parts[0]) {
    hours = ('' + time)[0];
    minutes = ('' + time)[1];
  } else if (time >= 100 && time <= 2359) {
    hours = ~~(time / 100);
    minutes = time % 100;
  } else if (time >= 2400) {
    hours = ~~(time / 100) - 24;
    minutes = time % 100;
    post_meridiem = false;
  }
  if (hours > 59 || minutes > 59) return;
  if (post_meridiem && hours !== 0) hours += 12;
  if (minutes > 59) minutes = 59;
  if (hours > 23) hours = 0;
  result = ('' + hours).padStart(2, '0') + ':' + ('' + minutes).padStart(2, '0');
  return result;
}

function JohnResig(t) {
  var d = new Date();
  var time = t.match(/(\d+)(?::(\d\d))?\s*(p?)/);
  d.setHours(parseInt(time[1]) + (time[3] ? 12 : 0));
  d.setMinutes(parseInt(time[2]) || 0);
  return d;
}

function DateObjectToTime(date) {
  var hours = String(date.getHours());
  if (hours.length < 2) hours = "0" + hours;
  var minutes = String(date.getMinutes());
  if (minutes.length < 2) minutes = "0" + minutes;
  return hours + ":" + minutes;
}

function Qwertie(t) {
  var time = t.match(
    /^\s*(\d\d?)(?::?(\d\d))?(?::(\d\d))?(?!\d)(\.\d+)?\s*(pm?|am?)?/i
  );
  if (time) {
    var hour = parseInt(time[1]),
      pm = (time[5] || " ")[0].toUpperCase();
    var min = time[2] ? parseInt(time[2]) : 0;
    var sec = time[3] ? parseInt(time[3]) : 0;
    var...