JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<input name="title" type="text" />
<textarea name="a_body" class="JS-form-body"></textarea>
<textarea name="a_json" class="JS-form-json"></textarea>

<div class="post-display JS-display-element" data-js-hook="display-content"></div>
<button class="grey-btn JS-add-element">Add Element</button>

JavaScript

var HTMLGenerator = function(){
	var createBtn = $(".JS-add-element");
	var safeCrackerForm = {
		html: $(".JS-form-body"),
		json: $(".JS-form-json")
	};
	var popOverCtn = $(".JS-add-pop-over");
	var popOverExitBtn = $(".JS-add-pop-over-exit");
	var popOverCreateBtn = $(".JS-add-pop-over-create");
	var elementType = $(".js-add-type");
	var elementContent = $(".js-add-content");
	var displayElement = $(".JS-display-element");
	var postInfo = {
		title: "",
		elements: [],
		elementTypes: [],
		html: ""
	};
	function elementTypes(name, startTag, endTag){
        postInfo.elementTypes.push({name: name, startTag: startTag, endTag: endTag});
	}
	elementTypes("Paragraph", "<p>", "</p>");
	elementTypes("Large Header", "<h2>", "</h2>");
	elementTypes("Blue Header", "<h3>", "</h3>");
	elementTypes("Small Header", "<h4>", "</h4>");
	elementTypes("HTML Code", "<pre class='code-block'><code class='language-markup'>", "</code></pre>");
	elementTypes("CSS Code", "<pre class='code-block'><code class='language-css'>", "</code></pre>");
	elementTypes("JS Code", "<pre class='code-block'><code class='language-javascript'>", "</code></pre>");
	
	PostElement.prototype = {
		createElement: function(){
			this.createTag();
			postInfo.elements.push(this);
		},
		createTag: function(){
			this.startTag = "";
			this.endTag = "";
			this.tags = this.tag.split(',');
			for(var t = 0; t < this.tags.length; t++){
				var fullTag = this.tags[t].split('.');
				var tag = fullTag.slice(0,1);
				fullTag = fullTag.splice(1,fullTag.length-1).join(" ");
				this.startTag = this.startTag+"<"+tag+" class='"+fullTag+"'>";
				this.endTag = "</"+tag+">"+this.endTag;
			}
		},
		deleteElement: function(){
			var delBtn = this.codeDisplay.delete;
			delBtn.on("click", function(){
				var count = 0;
				for(var i = 0; i < postInfo.elements.length; i++){
					var entry = postInfo.elements[i];
					if(delBtn ===...