JSFiddle - React, Tailwind, and code Playground

by Mustafa Oeztuerk

HTML

<div style="width:840px;margin:0px auto">
		<div style='padding:2px'>
		
		<div style='float:left;width:500px'>

<div id="Sample" style='width:100%'>
	<form name="sample_form" id="sample_form" method="post" action="">
    	<textarea name="sample_area" id="sample_area"></textarea><br/>
        <button type="button" name="sample_submit" id="submit_button" value="Submit">Post</button>
<div id="q">Emotions: " o:) ", " :3 ", " o.O ", " :'( ", " 3:) ", " :( ", " :O ", " 8) ", " :D ", " >:( ", " <3 ", " ^_^ ", " :* ", " :v ", " :) ", " -_- ", " 8| ", " :p "," :/ ", " >:O ", " ;) "</div>
    </form>
</div>


<div id="showHere" style="min-height:230px">

<p>Make People fall in love with your IDEAS o:)  </p>
	
<p id="showHere">I love you <3 </p>
	
</div>

</div>
<div style='float:right:width:200px;text-align:right'></div>
</div>

CSS

body {
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif; 
    font-size:14px;
    background-color:#dedede;
}
textarea {font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size:14px;
}
h1 {
font-family: 'Raleway', Helvetica, sans-serif;
font-size: 60px;
color: #000;
font-weight: 500;
margin:10px 0px 10px 0px;
}
#submit_button{padding:5px;font-size:14px}
#sample_area{width:470px}
#q{font-size:11px; margin:10px 0px 10px 0px}
p{ background-color:#fff; margin:5px 0px 5px 0px;padding:5px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}

JavaScript

$(document).ready(function(){
	$("#showHere").emotions();
		$("#sample_area").focus();
	$("#submit_button").click(function(){
		var sample = $("#sample_area").val();
		$("#showHere").prepend("<p>"+sample+"</p>").emotions();
	$("#sample_area").val('');
	$("#sample_area").focus();
	});
});




(function($){	
	$.fn.emotions = function(options){
		$this = $(this);
		var opts = $.extend({}, $.fn.emotions.defaults, options);
		return $this.each(function(i,obj){
			var o = $.meta ? $.extend({}, opts, $this.data()) : opts;					   	
			var x = $(obj);
			// Entites Encode 
			var encoded = [];
			for(i=0; i<o.s.length; i++){
				encoded[i] = String(o.s[i]).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
			}
			for(j=0; j<o.s.length; j++){
				var repls = x.html();
				if(repls.indexOf(o.s[j]) || repls.indexOf(encoded[j])){
					var imgr = o.a+o.b[j]+"."+o.c;			
					var rstr = "<img src=\'"+imgr+"' border='0' />";	
					x.html(repls.replace(o.s[j],rstr));
					x.html(repls.replace(encoded[j],rstr));
				}
			}
		});
	}	
	// Defaults
	$.fn.emotions.defaults = {
		a : "http://www.ecowebtr.com/emotions/",			// Emotions folder
		b : new Array("angel","colonthree","confused","cry","devil","frown","gasp","glasses","grin","grumpy","heart","kiki","kiss","pacman","smile","squint","sunglasses","tongue","unsure","upset","wink"),			// Emotions Type
		s : new Array("o:)",":3","o.O",":'(","3:)",":(",":O","8)",":D",">:(","<3","^_^",":*",":v",":)","-_-","8|",":p",":/",">:O",";)"),
		c : "png"					// Emotions Image format
	};
})(jQuery);