JSFiddle - React, Tailwind, and code Playground

by kylewlacy

HTML

<script src="https://raw.github.com/kylewlacy/planner/7fe228e41b03156fdc9069d1d33a9b018aa0bd5e/public/script/micro.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title>Planner</title>
    <link href='/style/main.css' rel='stylesheet' type='text/css' />
    <script src='/script/micro.js'></script>
    <meta charset='utf-8' />
    <meta content='yes' name='apple-mobile-web-app-capable' />
    <meta content='black' name='apple-mobile-web-app-status-bar-style' />
    <meta content='initial-scale = 1.0, user-scalable = no' name='viewport' />
  </head>
  <body>
    <section class='planner' id='schedule'>
      <header>
        <nav>
          <ul class='left'>
            <li>
              <a href='/form/account_settings'>
                <img alt='Account' src='/ui/header/account.svg' />
              </a>
            </li>
          </ul>
          <h1>Schedule</h1>
          <ul class='right'>
            <li>
              <a href='/form/add_course#'>
                <img alt='Add...' src='/ui/header/add.svg' />
              </a>
            </li>
          </ul>
        </nav>
      </header>
      <section class='main'>
        <ul id='courses'>
          <li class='blue' data-id='45'>
            <a href='/form/edit_course/45#'>
              <hgroup>
                <h1>Psychology</h1>
                <h2>703A</h2>
              </hgroup>
              <span class='edit'></span>
            </a>
          </li>
          <li class='green' data-id='46'>
            <a href='/form/edit_course/46#'>
              <hgroup>
                <h1>English</h1>
                <h2>505</h2>
              </hgroup>
              <span class='edit'></span>
            </a>
          </li>
          <li class='orange' data-id='47'>
            <a href='/form/edit_course/47#'>
              <hgroup>
                <h1>History</h1>
                <h2>702C</h2>
              </hgroup>
              <span class='edit'></span>
            </a>
          </li>
         ...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

html, * {
  font-family: Helvetica, Arial, sans-serif;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

form > * {
  display: block;
}

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  width: 100%;
  height: 100%;
}
body > section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
}
body > section header, body > section footer {
  color: white;
  position: absolute;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body > section header nav h1, body > section header nav ul, body > section footer nav h1, body > section footer nav ul {
  display: inline-block;
}
body > section header nav ul li, body > section footer nav ul li {
  display: inline-block;
}
body > section header {
  top: 0;
  background:...

JavaScript

document.body.addEventListener("ontouchstart", function(event) {
  if(document.getElementById("schedule").scrollTop > 0) return;
  event.preventDefault();
  event.stopPropagation();
}, false);

var requests = new Object();
function sendRequest(method, url, forceReload, callback, contentType, content) {
  var key = method + ':' + url;
  if(requests[key] == undefined || forceReload == true) {
    requests[key] = new XMLHttpRequest();
    requests[key].open(method, url, true);

    if(contentType == true) {
      contentType = 'application/x-www-form-urlencoded';
    }

    requests[key].setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    if(contentType != undefined) {
      requests[key].setRequestHeader('Content-Type', contentType);
    }

    if(callback != undefined) {
      requests[key].onreadystatechange = function() {
        if(requests[key].readyState == requests[key].DONE) {
          callback(requests[key]);
          init();
        }
      };
    }
    requests[key].send(content);

    return requests[key];
  }

  else {
    if(callback != undefined) {
      callback(requests[key]);
      init();
    }
    return requests[key];
  }
}

function submit() {
  var form = this.form;

 if(form instanceof Element) {
   var method_overrider = form.$("input[name='_method']")[0];
   var method = 'post';
   if(method_overrider != undefined) {
     method = method_overrider.attr('value');
   }
   else if(form.attr('method') != undefined) {
     method = form.attr('method');
   }
   method = method.toUpperCase();
   var url = form.attr('action');

   var params = "";
   var inputs = form.$('input[name],select[name]');
   for(input in inputs) {
     if(inputs[input] instanceof Element) {
       if(inputs[input].attr('name') != '_method') {
         if(params != "") {
           params = params + "&";
         }
         params = params + inputs[input].attr('name') + "=" + inputs[input].value;
       }
     }
   }

   sendRequest(method, url, true,...