JSFiddle - React, Tailwind, and code Playground

by chriseppstein

HTML

<h2>Tell us about your project and we'll help you get it set up</h2>
<p class="madlib customizable">I would like to set up my
<select id="existence"><option value="create">new</option><option value="init">existing</option></select>
<select id="app-type"><option value="stand-alone">compass</option><option value="rails">rails</option><option value="other">other</option></select> project
with
<select id="framework"><option value="compass">compass's</option><option value="blueprint">blueprint's</option><option value="bare">no</option></select>
starter stylesheets.
I prefer the
<select id="syntax"><option value="scss">CSS based (SCSS)</option><option value="sass">Indent based (Sass)</option></select>
syntax<span class="customization"> and would like to
<select id="options"><option value="default">use compass's recommended</option><option value="customized">customize my project's</option></select>
directory structure</span>.
</p>
<div id="steps">
    Loading...
</div>

CSS

body { font-family: Arial; }
h2 { font-size: 2em; }
#steps, p.madlib, p.note { margin-top: 1em; }
p.note {font-size: smaller; font-style: italic;}
p.warning { color: #c00; }
.customization { display: none; }
.customizable .customization { display: inline; }

JavaScript

function showInstallCommand() {
    var cmd = $("#existence").val();
    var commands = [];
    var notes = [];
    var project_name = "&lt;myproject>";
    var can_be_bare = true;
    commands.push("$ gem install compass");
    if (cmd == "init") {
        commands.push("$ cd "+project_name);
        project_name = ".";
    }
    if ($("#app-type").val() == "rails") {
        if (cmd == "create") {
            commands.push("$ rails new "+project_name);
        }
        cmd = "init rails";
        can_be_bare = false;
    } else if($("#app-type").val() == "other") {
        if (cmd == "init") {
            cmd = "create";
        }
    } else if ($("#app-type").val() == "stand-alone") {
        if (cmd == "init") {
            cmd = "install";
            can_be_bare = false;
        }
    }
    var framework = $("#framework").val();
    var create_command;
    if (cmd == "install") {
        create_command = "$ compass install "+framework+" "+project_name;
   } else {
       create_command = "$ compass "+cmd+" "+project_name;
    }
    if (framework != "compass" && framework != "bare" && cmd != "install") {
      create_command = create_command + " --using "+framework;
    } else if (framework == "bare") {
        if (can_be_bare) {
          create_command = create_command + " --bare";
        } else {
            notes.push("<p class='note warning'>You cannot create a bare project in this configuration. Feel free to remove any stylesheets that you don't want.</p>");
        }
    }
    if ($("#syntax").val() == "sass") {
      create_command = create_command + " --syntax sass";
    }
    if ($("#options").val() == "customized") {
        create_command = create_command + " --sass-dir &lt;sassdir> --css-dir &lt;cssdir> --javascript-dir &lt;jsdir> --images-dir &lt;imgsdir> --fonts-dir &lt;fontsdir>";
    }
    commands.push(create_command);
    var instructions = "<pre><code>"+commands.join("\n")+"</code></pre>";
    if (instructions.match(/&lt;/)) {
       ...