JSFiddle - React, Tailwind, and code Playground

by Pat Cullen

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div id="pnlOne">
    <div data-role="header">
        	<h3>Number of Input Rectangles</h3>

    </div>
    <p>
        <label for="sldNumber">How many rectangles would you like to generate?</label>
        <input type="range" name="sldNumber" id="sldNumber" value="12" min="3" max="30" />
        <button type="submit" data-theme="b" data-inline="true" id="btnStep1">Generate</button>
    </p>
</div>
<div id="pnlTwo" class="hidden">
    <div data-role="header">
         <h3>View/Download Generated Data</h3>

    </div>
    <p>
        <div class="ui-grid-a">
            <div class="ui-block-a">You can download a file that represents your rectangles <a id="lnkDownload" href=""><button type="submit" data-theme="c" data-icon="arrow-d" id="btnDownloadInput">Download</button></a>

            </div>
            <div class="ui-block-b">
                <label for="textarea-a">Have a sneak peak here:</label>
                <textarea name="textarea" id="txtSneak"></textarea>
            </div>
        </div>
        <button type="submit" data-theme="b" data-inline="true" id="btnStep2">Continue...</button>
    </p>
</div>
<div id="pnlThree" class="hidden">
    <div data-role="header">
         <h3>Input Data</h3>

    </div>
    <div data-role="header" data-theme="e" id="pnlError" class="hidden">
        <p></p>
    </div>
    <p>
        Enter your data here.         
        <button type="submit" data-theme="d" data-inline="true" id="btnLazyPaste" data-mini="true">Copy from previous step</button>
                <textarea name="txtInput" id="txtInput"></textarea>

        <button type="submit" data-theme="b" data-inline="true" id="btnStep3">Continue...</button>
    </p>
</div>
<div id="pnlFour" class="hidden">
    <div data-role="header">
        	<h3>View Result</h3>

    </div>
    <p>
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <div...

CSS

textarea {
    height: 180px !important;
    max-height: 180px !important;
}
.hidden {
    display: none;
}
#canvasInput {
    float: right;
    z-index: 1px;
}
.canvas {
    margin: 0 10px;
    position: relative;
    background-color: #fff;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-clip: padding-box;
    /* prevent bleeding out of corners in some browsers */
    z-index: 2px;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
#canvasInput.overlay {
    left: 135px;
}
#canvasOutput.overlay {
    left: -135px;
    background-color: transparent;
}

JavaScript

// Rotating Rectangle Problem
var rrp = {
    // Some constants
    minBarWidth: 2,  // what are the parameters for the randomness of the rectangles
    minBarHeight: 5,
    maxBarWidth: 10,
    maxBarHeight: 70,
    csvLineSep: '\n', // how shall we delimit our human readable serialized data?
    csvDigitSep: ',',
    dataRegex: /^((\d)+,(\d)+\n)*(\d)+,(\d)+\n*$/, // should validate csv with at least two lines
    canvasWidth: 250, // options for styling the pictures at teh end of the app
    canvasHeight: 220,
    canvasMargin: 10,
    canvasColors: ['0E5D82', '2885B0', '52A5CC', '52BACC', '5A9AA6', '69CEC6', '4C9AB5', '5098AF', '60788F'],

    // init all variables and interface elements
    runOnceAtStart: function () {
        // continue buttons
        $('#btnStep1').click(rrp.generateData);
        $('#btnStep2').click(rrp.showInputPane);
        $('#btnStep3').click(rrp.processInput);
        // I'm lazy
        $('#btnLazyPaste').click(function () {
            $('#txtInput').val($('#txtSneak').val());
        });
        // Overlay button : CSS used for overlay effect
        $('#btnOverlay').mousedown(function () {
            $('#canvasInput').addClass('overlay');
            $('#canvasOutput').addClass('overlay');
        });
        $("#btnOverlay").mouseup(function () {
            $('#canvasInput').removeClass('overlay');
            $('#canvasOutput').removeClass('overlay');
        });
        // restart button
        $('#btnRestart').click(function () {
            $('#txtSneak').val('');
            $('#txtInput').val('');
            $('#pnlFour').addClass('hidden');
            $('#pnlOne').removeClass('hidden');
        });
        // automate entry through app to view new output
        $('#btnAutomate').click(function () {
            rrp.generateData();
            rrp.showInputPane();
            $('#txtInput').val($('#txtSneak').val());
            rrp.processInput();
        });
        // setup canvas for graphics
       ...