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

// nobounce.js
// From http://www.hakoniemi.net/labs/scrollingOffset/nonbounce.html
var nonbounce = function(elems) {
    var cont;
    var startY;
    var idOfContent = "";
    nonbounce_touchmoveBound = false;

    var isContent = function(elem) {
        var id = elem.getAttribute("id");
        
        while (id !== idOfContent && elem.nodeName.toLowerCase() !== "body") {
            elem = elem.parentNode;
            id = elem.getAttribute("id");
        }
        
        return (id === idOfContent);
    };
    
    var touchstart = function(evt) {
        // Prevents scrolling of all but the nonbounce element
        if (!isContent(evt.target)) {
            evt.preventDefault();
            return false;
        }

        startY = (evt.touches) ? evt.touches[0].screenY : evt.screenY;
    };
    
    var touchmove = function(evt) {
        var elem = evt.target;

        var y = (evt.touches) ? evt.touches[0].screenY : evt.screenY;
        
        // Prevents scrolling of content to top
        if (cont.scrollTop === 0 && startY <= y) {
            evt.preventDefault();
        }
        
        // Prevents scrolling of content to bottom
        if (cont.scrollHeight-cont.offsetHeight === cont.scrollTop && startY >= y) {
            evt.preventDefault();
        }
    }
    
    if (typeof elems === "string") {
        cont = document.getElementById(elems);
        
        if (cont) {
            idOfContent = cont.getAttribute("id");
            window.addEventListener("touchstart", touchstart, false);
        }
    }
    
    if (!nonbounce_touchmoveBound) {
        window.addEventListener("touchmove", touchmove ,false);
    }
};




nobounce("schedule");

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);

   ...