JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>
<section>
		<div class="column col1">
			<h2>Create a Task</h2>
			<form id="taskForm" action="">
				<fieldset>
					<label for="name">
						<span>Task Name</span>
						<input id='name' placeholder='enter your name' type="text">
					</label>
					<label for="date">
						<span>Date</span>
						<input id='date'  placeholder='enter your task' type="text">
					</label>
					<label for="assigned">
						<span>Assigned To</span>
						<input id='assigned' placeholder='enter your assignee'  type="text">
					</label>
					<input type="submit" id="submit" value="Submit">
				</fieldset>
			</form>
		</div>
		<div class="column col2">
			<h2>Existing Tasks</h2>
			<ul><!--existing list --></ul>
		</div>
	</section>



<script type="text/x-handlebars-template" id="existingTask">
		{{#each this}}
			<li>{{name}} <span class='date'>{{date}}</span> <strong class='assigned'>{{assigned}}</strong></li>
		{{/each}}
</script>

CSS

body{
	font:normal 62.5%/1 Helvetica,'san-sarif';
	background: #ECECEC;
}


header,
section{
	width: 780px;
	margin: 0 auto;
	overflow: hidden;
}

header{
	padding: 50px 20px;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}


h1{
	font-size:4em;
}
	h1 span{
		display: block;
		font-size: 0.5em;
		color: #B2B2B2;
	}



div.column{
	background: #fff;
	float: left;
	padding: 40px 20px;
	min-height: 430px;
	width: 49.5%;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	overflow: hidden;
}

	div.col2{
		float: right;
	}


h2{
	font-family: serif;
	font-size: 2em;
	margin-bottom: 30px;
}


label{
	display: block;
	font-size: 1.6em;
	margin-bottom: 15px;
}
	label span{
		display: block;
		padding-bottom: 5px;
	}

	input[type=text]{
		background: #ECECEC;
		border-radius: 5px;
		border: 1px solid #D4D4D4;
		font-size: 1em;
		padding: 10px;
		width: 300px;
	}

	input[type=submit]{
		font-family: serif;
		background: #2A2A2A;
		border-radius: 5px;
		border: 0;
		color: #fff;
		cursor: pointer;
		font-size: 1.8em;
		padding: 10px 20px;
	}

div.column ul{
	font: normal 1.6em serif;
	border: 3px solid #BABABA;
	border-radius: 5px;
	padding: 2px;
}
	div.column ul li{
		padding: 10px;
		position: relative;
	}
		div.column ul li span,
		div.column ul li strong{
			font: normal 0.8em sans-serif;
		}

		div.column ul li span.date{
			color: #989898;
		}

		div.column ul li strong{
			position: absolute;
			right: 5px;
		}

		div.column ul li:nth-child(even){
			background: #ddd;
		}

form{
    visibility:hidden;
}

JavaScript

var staticData = {
	datas : [
		{"name": "Test Task #1", "date": "12/01/2012", "assigned": "John Doe" },
		{"name": "Test Task #2", "date": "12/02/2012", "assigned": "John Doe" },
		{"name": "Test Task #3", "date": "12/03/2012", "assigned": "John Doe" },
		{"name": "Test Task #4", "date": "12/04/2012", "assigned": "John Doe" },
		{"name": "Test Task #5", "date": "12/05/2012", "assigned": "John Doe" },
		{"name": "Test Task #6", "date": "12/06/2012", "assigned": "John Doe" },
		{"name": "Test Task #7", "date": "12/07/2012", "assigned": "John Doe" }
	]
};

var template = Handlebars.compile($('#existingTask').html());
$('ul').append(template(staticData.datas));


var 
	form = $('#taskForm'),
	submit = form.find('#submit');

	submit.click(function(e) {

		e.preventDefault();

		var
		name     = $.trim(form.find('#name').val()),
		date     = $.trim(form.find('#date').val()),
		assigned = $.trim(form.find('#assigned').val()),
		newData  = { setData :[ {"name": name, "date": date, "assigned": assigned }] };

		var result = _.find(staticData.data, function(val){ 
            return _.isEqual(object, val)
        });
        
        var status = _.isObject(result) ? true : false;
        
        console.log('status', status);

		staticData.datas.push(newData.setData[0]);

		if(!status && name && date && assigned){
			$('ul').prepend(template(newData.setData));
		}

	});