JSFiddle - React, Tailwind, and code Playground

by aybalasubramanian

HTML

<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
<div class="wrapper">
<div id="tableizer">
	<h1>Tableizer</h1>
	<p>Copy and paste from your xls file here and have it converted to wiki table format.</p>
	<div>
		<textarea id="table_text" name="comments" cols="40" rows="6"></textarea>
	</div>
    <button id="button_make" type="button">Make</button>
	<div id="result"></div>
</div>

CSS

* {
	padding: 0;
	margin: 0;
}
body {
	padding: 15px;
	font-size: 12pt;
	font-family: Arial, sans-serif;
}
p {
	margin-bottom: 1em;
	
}
h1 {
	margin-bottom:0.8em;
}
h2, h3 {
	margin-top: 1em;
	margin-bottom: 0.2em;
}
#result {
	clear:both;
}
#button_make {
	padding: 5px;
	clear:both;
	font-size: 12pt;
	float:left;
}
#output {
	padding:15px;
	background:#eee;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-webkit-box-shadow: 2px 3px 15px #222;
	-moz-box-shadow: 2px 3px 15px #222;
	
}

JavaScript

window.addEvent('domready', function() {	

	$('button_make').addEvent('click', function() {
		var text = $('table_text').get('value');
		var result_pre = $('output');
		if(result_pre == null) {
			new Element('h2', {'html': 'Resulting Text'}).inject('result');
			result_pre = new Element('pre', {'id': 'output'}).inject('result');
		};
		var tab = new RegExp("\\t", "g");
		text=text.replace(tab, "|");
		var split_text = text.split('\n');
		text = "";
		split_text.each(function(s) {
			if (s.length > 0)
			text += "|" + s + "|\n";
		});
		result_pre.set('html', text);
	});

});