JSFiddle - React, Tailwind, and code Playground

by Wentz Wu

HTML

<header>
    <h1>Super HTML5 Editor</h1>
</header>
<section id="list">
     <h1>File Browser</h1>

    <details open id="filedrop">
        <summary>Create File</summary>
        <form name="create">
            <div>
                 <h2>Create an empty file</h2>

                <input type="text" name="name" placeholder=" e.g. index.html">
                <input type="submit" value="Create">
            </div>
        </form>
        <div class="spacer">OR</div>
        <form name="import">
            <div>
                 <h2>Import existing file(s)</h2>

                <input type="file" name="files" multiple accept="text/html">
                <input type="submit" value="Import">
            </div>
        </form>
        <div class="note"> <strong>Note</strong>: You can drag files from your computer and drop them anywhere in this box to import them into the application.</div>
    </details>
    <details open>
        <summary>My Files</summary>
        <div class="note top">You currently have <span id="file_count">0</span> file(s):</div>
        <ul id="files"></ul>
        <div class="note"> <strong>Note</strong>: You can drag any of the files in the list above to your computer to export them from the application.</div>
    </details>
</section>
<section id="editor">

CSS

* {
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
    margin: 0;
    padding: 0;
}
/* Main Application Header */
 header h1 {
    margin: 0;
    padding: 10px;
    border-bottom: 1px solid #000;
    background-color: #444;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #777), color-stop(1, #111));
    background-image: -webkit-linear-gradient(top, #777, #111);
    background-image: -moz-linear-gradient(top, #777, #111);
    background-image: -o-linear-gradient(top, #777, #111);
    background-image: -ms-linear-gradient(top, #777, #111);
    background-image: linear-gradient(to bottom, #777, #111);
    font-weight: 300;
    color: #fff;
    text-shadow: 0 -1px 0 #000;
}
/* Hide Sections by default */
 section {
    padding: 0px 10px;
    display: none;
}
/* Display active section */
 body.browser-view section#list, body.editor-view section#editor {
    display: block;
}
/*gw*/

/* Section header */
 section h1 {
    margin: 10px 0;
    color: #555;
    font-weight: 500;
    font-size: 1.6em;
}
/* Standard blue button (or link in section header) */
 button, input[type=submit], section h1 a {
    margin: 5px 0;
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 1.05em;
    text-shadow: 0 -1px 0 #000;
    color: #fff;
    background-color: #1e68a5;
    border: 1px solid #1e68a5;
    cursor: pointer;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #1e68a5), color-stop(1, #143a6f));
    background-image: -webkit-linear-gradient(top, #1e68a5, #143a6f);
    background-image: -moz-linear-gradient(top, #1e68a5, #143a6f);
    background-image: -o-linear-gradient(top, #1e68a5, #143a6f);
    background-image: -ms-linear-gradient(top, #1e68a5, #143a6f);
    background-image: linear-gradient(to bottom, #1e68a5, #143a6f);
}
/* Button in section header */
 section h1 a {
    float: right;
    font-size: 0.6em;
    text-decoration: none;
    font-weight: normal;
   ...

JavaScript

(function () {
    var SuperEditor = function () {};

    var init = function () {
        new SuperEditor();
    };

    window.addEventListener('load', init, false);


    var view, fileName, isDirty = false,
        unsavedMsg = 'Unsaved changes will be lost. Are you sure?',
        unsavedTitle = 'Discard changes';

    var markDirty = function () {
        isDirty = true;
    };

    var markClean = function () {
        isDirty = false;
    };

    var checkDirty = function () {
        if (isDirty) {
            return unsavedMsg;
        }
    };

    window.addEventListener('beforeunload', checkDirty, false);

    var jump = function (e) {
        var hash = location.hash;
        if (hash.indexOf('/') > -1) {
            var parts = hash.split('/'),
                fileNameEl = document.getElementById('file_name');

            view = parts[0].substring(1) + '-view';
            fileName = parts[1];
            fileNameEl.innerHTML = fileName;
        } else {
            if (!isDirty || confirm(unsavedMsg, unsavedTitle)) {
                markClean();
                view = 'browser-view';
                if (hash != '#list') {
                    location.hash '#list';
                }
            } else {
                location.href = e.oldURL;
            }
        }
    };

    jump();

    window.addEventListener('hashchange', jump, false);




})();