JSFiddle - React, Tailwind, and code Playground

by shaneburgess

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div id="form">
<label><b>Item Name</b></label>
<input type="text" id="name" class="span12">
<label><b>Item Pictrue Url</b></label>
<input type="text" id="picUrl" class="span12">
<label><b>Item Description</b></label>
<textarea id="description" class="span12" rows="20"></textarea>
<br>
<button class="btn" id="generate">Generate</button>
</div>
<div id="output" class="hide">
    <div id="outputPreview"></div>
<textarea id="outputHtml" class="span12" rows="30"></textarea>
    <br>
<button class="btn" id="edit">Edit</button>
    </div>

JavaScript

$("#generate").click(function(){
      $("#form").addClass("hide");
      $("#output").removeClass("hide");
       var htmlOutput = new Array();
    htmlOutput.push('<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">');
       htmlOutput.push('<div class="container">');
       htmlOutput.push("<h3>"+$("#name").val()+"</h3>");
       htmlOutput.push('<img src="'+$("#picUrl").val()+'" height="30%" width="30%">');
       htmlOutput.push('<h5>Description</h5>');
       htmlOutput.push($("#description").val().replace(/\n/g,"<br>"));
       htmlOutput.push('</div>');
       $("#outputPreview").html(htmlOutput.join("\n"));
       $("#outputHtml").val(htmlOutput.join("\n"));
    
});

$("#edit").click(function(){
            $("#output").addClass("hide");
      $("#form").removeClass("hide");
});