JSFiddle - React, Tailwind, and code Playground

by kaizhu256

HTML

<style>
/* jslint utility2:true */
/* csslint ignore:start */
*,
*:after,
*:before {
    box-sizing: border-box;
}
/* csslint ignore:end */
body {
    background: #eee;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
}
input {
    width: 100%;
}
textarea {
    font-family: Consolas, Menlo, monospace;
    font-size: smaller;
    overflow: auto;
    width: 100%;
}
</style>

<div id="ajaxProgressDiv1" style="background: #d00; height: 5px; left: 0; margin: 0; padding: 0; position: fixed; top: 0; transition: background 500ms, width 1500ms; width: 0%; z-index: 1;"></div>

<label>ajax-request</label><br>
<textarea id="input1" style="height: 10rem;">{
    "method": "GET",
    "url": "https://api.github.com/orgs/octokit/repos",
    "headers": {
        "accept": "application/vnd.github.v3+json"
    },
    "data": "hello world!"
}</textarea><br><br>

<button id="submit1">submit ajax-request</button><br><br>

<label>ajax-response</label><br>
<textarea id="output1" style="height: 20rem;"></textarea><br><br>

<script>
/* jslint utility2:true */
/*jslint browser*/
(function () {
    "use strict";
    var local;
    local = {};
    window.local = local;

    local.ajax = function (opt, onError) {
    /*
     * simple, throwaway ajax-function that can be easily rewritten
     * to accomodate new [async] ux-features
     */
        var resHandler;
        var xhr;
        opt.headers = opt.headers || {};
        opt.method = opt.method || "GET";
        xhr = new XMLHttpRequest();
        // open url
        xhr.open(opt.method, opt.url);
        // set req-headers
        Object.entries(opt.headers).forEach(function (entry) {
            xhr.setRequestHeader(entry[0], entry[1]);
        });
        // send data
        xhr.send(opt.data);
        // init request-handling
        resHandler = function (evt) {
        /*
         * this function will handle ajax-response
         */
            switch (evt.type) {
            case "abort":
            case...