OrderList

A restaurant chef's order queue.

HTML

<div id="container">
		<div>
			<h1>Enter Your Order</h1>
			<div id="orderBox">
				<input type="textbox" id="name" placeholder="Name">
				<input type="textbox" id="order" placeholder="Order">
				<input type="submit" id="submit" value="Order Now">
			</div>
		</div>
		<div id="orderList">
			<h1>Pending Order List</h1>
			<p class="orderDisp">
				<span class="orderId">OrderID:</span> 1 <span class="orderName">Name:</span> John Doe <span class="orderContent">Order:</span> CheeseBurger
				<img class="deleteBtn" src="http://simpleicon.com/wp-content/uploads/cross.png" alt="Delete Order">
			</p>
			<p class="orderDisp">
				<span class="orderId">OrderID:</span> 2 <span class="orderName">Name:</span> Jane Doe <span class="orderContent">Order:</span> Steak
				<img class="deleteBtn" src="http://simpleicon.com/wp-content/uploads/cross.png" alt="Delete Order">
			</p>
			<p class="orderDisp">
				<span class="orderId">OrderID:</span> 3 <span class="orderName">Name:</span> Santa Claus <span class="orderContent">Order:</span> Chicken Zinger Burger
				<img class="deleteBtn" src="http://simpleicon.com/wp-content/uploads/cross.png" alt="Delete Order">
			</p>
		</div>
	</div>

CSS

body {
	font-family: Verdana, sans-serif;
	font-size: medium;
	background: #F2E5A0 url(images/The-Cheeseburger.png) no-repeat;
	background-size: cover;
	padding: 50px;
}

h1 {
	color: #000;
}

#orderBox {
	background-color: #B7BBDC;
	padding: 25px;
}

#name {
	width: 200px;
	text-align: center;
}

#order {
	width: 500px;
}

#container {
	opacity: 0.8;
	background-color: #F2C095;
	padding: 50px;
	min-width: 875px;
}

.orderDisp {
	background-color: #A6D98F;
	padding: 20px;
	position: relative;
}

.orderId, .orderName, .orderContent {
	font-weight: bold;
	padding-left: 20px;
	color: #223A2B;
}

.deleteBtn {
	height: 20px;
	vertical-align: middle;
	text-align: right;

	position: absolute;
	top: 35%;
	left: 95%;
}

JavaScript

$(document).ready(function() {

	var orderId=4; // Starting form 4

	$("#submit").on('click', function() 
	{

		var orderName = $("#name").val();
		var orderContent = $("#order").val();
		orderName = orderName.trim();
		orderContent = orderContent.trim();

		if((orderName !== "") && (orderContent !== ""))
		{
			$p = $('<p class="orderDisp">');

			var content = '<span class="orderId">OrderID:</span> '+orderId+' <span class="orderName">Name:</span> '+orderName+' <span class="orderContent">Order:</span> '+orderContent;
			content += '<img class="deleteBtn" src="http://simpleicon.com/wp-content/uploads/cross.png" alt="Delete Order">';

			$p.append(content);
			$p.appendTo('#orderList');
		}

		$("#name").val("");
		$("#order").val("");
	});

	$("#order").keydown(function(e) {
		if(e.keyCode == 13)
			$("#submit").click();
	});

	$("#orderList").on('click', '.deleteBtn',function() {
		
		$(this).parent().remove();

	});

});