CodePen Embed - Text to HTML Menu/List v2.0

<!--PEN CODE-->
<div id="inputBox" class="box inputBox">
	<label for="textList">Text to HTML Menu/List <span>v2.0</span></label>
	<textarea name="textList" id="textList" cols="30" rows="4"></textarea>
	<p>
		<button id="eraser" class="btn" title="Erase">
			<i class="fa fa-fw fa-lg fa-eraser"></i>
		</button>
		<strong>How to use:</strong>
		<ol>
			<li>Enter one item per line</li>
			<li>Select your Menu</li>
			<li>Click Generate</li>
		</ol>
	</p>
	<span>Select your Menu
	<select name="htmlSelect" id="htmlSelect">
		<option value="">- Select an Option -</option>
		<option value="">Select Menu</option>
		<option value="">Unordered List</option>
		<option value="">Ordered List</option>
	</select>
</span>
	<input id="generate" type="submit" value="Generate" />
</div>
<div class="container">
	<p id="more_opts" class="more_opts"><i class="fa fa-fw fa-plus"></i>Advanced Options</p>
</div>
<div id="optionsBox" class="box options hide">
	<span><input id="valueBox" type="checkbox" disabled>Give option(s) a value of entered item name(s)</span>
	<label for="id">id:</label>
	<input id="id" type="text">
	<label for="class">class:</label>
	<input id="class" type="text">
</div>

<div class="htmlBox">
	<button id="copy" class="btn copy" title="Copy to Clipboard">
		<i class="fa fa-fw fa-lg fa-clipboard"></i> Copy to Clipboard
	</button>
	<pre><code id="code" class="language-markup">

        </code></pre>
</div>
<!--END PEN CODE-->

/*PEN STYLES*/
$error: tomato;
$blue: dodgerblue;
$grey: #d3d3d3;
$white: #fff;

%border {
	border-color: $grey;
}

%smTxt {
	color: #666;
	font-size: 14px;
}
body {
	background: #3b70fc;
	margin: 2rem auto;
}

.container {
	max-width: 420px;
	margin: 0 auto;
}

.more_opts {
	display: inline-block;
	margin: 0;
	cursor: pointer;
	color: $white;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	&:hover {
		color: darken($white, 5);
	}
}

button {
	border: 0;
}
input {
	border: 1px solid $grey;
}

.box {
	@extend .container;
	border-radius: 3px;
	background: #fff;
	font-size: 16px;
	padding: 20px;
	margin: 15px auto;
	box-shadow: 0 5px 3px -2px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	@media screen and (max-width: 360px) {
		margin-top: 0;
	}
	label {
		font-family: "Montserrat";
	}
	span {
		@extend %smTxt;
		&.error {
			color: $error;
			select {
				border-color: $error;
			}
		}
	}
	select {
		@extend %border;
		margin-left: 3px;
		margin-top: 5px;
		padding: 2px 3px;
		cursor: pointer;
	}
	p,
	ol {
		@extend %smTxt;
		line-height: 1.2em;
		margin: 5px 0;
	}
	textarea {
		border-radius: 3px;
		@extend %border;
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		margin: 10px auto 5px;
		&.error {
			border-color: $error;
		}
	}
	input[type="submit"] {
		border-radius: 3px;
		@extend %border;
		@extend label;
		float: right;
		cursor: pointer;
		padding: 7px 10px;
		background: transparent;
		color: #666;
		text-transform: uppercase;
		font-weight: 700;
		&:hover {
			background: $blue;
			border-color: transparent;
			color: #fff;
		}
		@media screen and (max-width: 360px) {
			float: none;
			margin: 20px auto 0;
		}
	}
	&.inputBox {
		label {
			display: block;
			font-weight: 700;
			text-transform: uppercase;
			border-bottom: 1px solid $grey;
			padding-bottom: 7px;
		}
	}
	&.options {
		span {
			display: block;
			padding-bottom: 10px;
		}
		label {
			@extend %smTxt;
		}
		input[type="text"] {
			@extend %border;
			display: inline-block;
			box-sizing: border-box;
			padding: 4px;
			width: 42%;
			margin: 0 auto;
			@media screen and (max-width: 360px) {
				width: 100%;
			}
			;
		}
		input[type="checkbox"] {
			vertical-align: middle;
		}
	}
}

.btn {
	@extend %border;
	border-radius: 3px;
	display: inline-block;
	float: right;
	padding: 5px;
	margin-top: -5px;
	margin-left: 5px;
	background: transparent;
	color: $grey;
	cursor: pointer;
	&.copy {
		float: none;
		color: $white;
		&:hover {
			border-color: darken($white, 5);
		}
	}
	&:hover {
		color: $grey;
	}
}

.htmlBox {
	margin: 0 auto!important;
	max-width: 600px;
	position: relative;
	text-align: right;
	pre,
	code {
		clear: both;
	}
}

View Compiled

(function($) {
	"use strict";
	var t2h = {
		add_class_id: function() {
			var class_id = "",
				id = this.has_id(),
				clss = this.has_class();
			if (id && clss) {
				class_id = 'id="' + id + '" ';
				class_id += 'class="' + clss + '"';
			} else if (id) {
				class_id = 'id="' + id + '"';
			} else if (clss) {
				class_id = 'class="' + clss + '"';
			}
			return class_id;
		},
		buildHTML: function() {
			var i,
				list,
				type = this.htmlSelect[0].options,
				id = this.id_input,
				clss = this.class_input,
				valueBox = this.valueBox;
			if (type[1].selected) {
				//console.log(type[1].text);
				if (id.val() || clss.val()) {
					list = "<select ";
					list += this.add_class_id();
					list += ">";
				} else {
					list = "<select>";
				}
				list += "\n";
				for (i = 0; i < this.get_items().length; i++) {
					if (valueBox.is(":checked")) {
						list += "  <option ";
						list += 'value="';
						list += this.get_items()[i];
						list += '">';
					} else {
						list += "  <option>";
					}
					list += this.get_items()[i];
					list += "</option>";
					list += "\n";
				}
				list += "</select>";
			} else if (type[2].selected) {
				//console.log(type[2].text);
				if (id.val() || clss.val()) {
					list = "<ul ";
					list += this.add_class_id();
					list += ">";
				} else {
					list = "<ul>";
				}
				list += "\n";
				for (i = 0; i < this.get_items().length; i++) {
					list += "  <li>";
					list += this.get_items()[i];
					list += "</li>";
					list += "\n";
				}
				list += "</ul>";
			} else if (type[3].selected) {
				//console.log(type[3].text);
				if (id.val() || clss.val()) {
					list = "<ol ";
					list += this.add_class_id();
					list += ">";
				} else {
					list = "<ol>";
				}
				list += "\n";
				for (i = 0; i < this.get_items().length; i++) {
					list += "  <li>";
					list += this.get_items()[i];
					list += "</li>";
					list += "\n";
				}
				list += "</ol>";
			}
			//list = this.encodeHTML(list);
			this.render(list);
		},
		copyToClipboard: function() {
			//console.log(this.clip);
			var temp = $("<textarea></textarea>");
			//temp.attr("hidden", true);
			$("body").append(temp);
			temp.val(this.clip).select();
			document.execCommand("copy");
			temp.remove();
		},
		DOM: function() {
			//console.log("DOM");
			this.textList = $("#textList");
			this.htmlSelect = $("#htmlSelect");
			this.generate = $("#generate");
			this.codeBox = $("#code");
			this.id_input = $("#id");
			this.class_input = $("#class");
			this.optionsBtn = $("#more_opts");
			this.optionsBox = $("#optionsBox");
			this.valueBox = $("#valueBox");
			this.eraserBtn = $("#eraser");
			this.clipboardBtn = $("#copy");
		},
		encodeHTML: function(html) {
			return String(html)
				.replace(/&/g, "&amp;")
				.replace(/</g, "&lt;")
				.replace(/>/g, "&gt;")
				.replace(/"/g, "&quot;");
		},
		erase: function() {
			this.textList.val("");
		},
		errorCheck: function() {
			var option1 = this.htmlSelect[0].options[0],
				textarea = this.textList;

			this.resetErrors();

			if (option1.selected || textarea.val() === "") {
				if (option1.selected) {
					//console.log("Error: Select your Menu");
					this.has_error(this.htmlSelect[0].parentElement);
				}
				if (textarea.val() === "") {
					//console.log("Error: Please enter an item");
					this.has_error(textarea);
				}
				return false;
			}
			this.buildHTML();
		},
		events: function() {
			//console.log("Events");
			this.generate.on("click", this.errorCheck.bind(this));
			this.optionsBtn.on("click", this.toggleOptions.bind(this));
			this.htmlSelect.on("change", this.toggleValueBox.bind(this));
			this.clipboardBtn.on("click", this.copyToClipboard.bind(this));
			this.eraserBtn.on("click", this.erase.bind(this));
		},
		get_items: function() {
			var text = this.textList.val().trim(),
				items = text.split("\n");
			return items;
		},
		has_class: function() {
			var clss = this.class_input;
			if (clss.val()) {
				//console.log("CLASS: " + this.class_input.val());
				return clss.val();
			} else {
				return false;
			}
		},
		has_error: function(elm) {
			$(elm).addClass("error");
		},
		has_id: function() {
			var id = this.id_input;
			if (id.val()) {
				//console.log("ID: " + this.id_input.val());
				return id.val();
			} else {
				return false;
			}
		},
		init: function() {
			//console.log("Init");
			this.DOM();
			this.events();
		},
		render: function(list) {
			this.clip = list;
			list = this.encodeHTML(list);
			this.codeBox.html(list);
			//re-rerun syntax highlighter
			Prism.highlightAll();
		},
		resetErrors: function() {
			$(".error").removeClass();
		},
		toggleOptions: function() {
			//console.log("Toggling Options");
			this.optionsBox.slideToggle(250);
		},
		toggleValueBox: function() {
			var selectMenu = this.htmlSelect[0].options[1];
			if (selectMenu.selected) {
				this.valueBox.removeAttr("disabled", false);
			} else {
				this.valueBox.attr("disabled", true);
			}
		}
	};
	t2h.init();
})(jQuery);

Run Pen

This Pen is owned by Chyno Deluxe on CodePen.

See more by @ChynoDeluxe on CodePen

External CSS

External JavaScript