Creating A Simple Shopping List Using jQuery

A super lightweight jQuery widget to create a shopping list on your web page that you can add, remove, and check off the items. Also can be used as a To-do list web app to manage your task.

How to use it:

1. Include the jQuery javascript library in the html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

2. Create the html for the shopping list.

<div class="input">
<h3>Enter Item:</h3>
<input type="text" class="custinput" id="item-input" placeholder="Enter shopping item..." autofocus>
<button type="submit" class="btn">add</button>
</div>

<div class="list">
<h3>List:</h3>
<table class="items">
<thead>
<tr>
<th class="edit" colspan="3"><span>edit</span></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

3. The javascript.

var id = 1; // unique id for list items

$(document).ready(function(e) {
	editButton();

	$("tbody").on("click", ".cross", function() {
		$(this).closest("tr").remove();
	});

	$("button").on("click", getInput);

	$("tbody").on("click", ".box", function() {
		$(this).closest("tr").find("span").toggleClass("checked");
	});

});

// triggered on Enter
$(document).on("keydown", function(e) {
	if(e.keyCode === 13) {
		getInput();
	}
});



// Toggle delete icon when edit button is clicked
function editButton() {
	$(".edit").on("click", "span", function() {
		$(".cross").toggle();
	});
}


// Obtaining customer input and then calling addItem() with the input
function getInput() {
	var custInput = $(".custinput");
	var input = custInput.val();

	if ((input !== "") && ($.trim(input) !== "")) {
		addItem(input);
		custInput.val("");
	}
}


/******************************************************************************
	adding item to the list
	increment id counter for unique id
*******************************************************************************/
function addItem(message) {

	$(".cross").hide(); // hiding the delete icon

	var checkbox = "<td class=\"check\">" + "<input type=\"checkbox\" id=\"item" + id + "\" class=\"box\">" + "<label for=\"item" + id + "\" class=\"check-label\"></label></td>";

	var content = "<td class=\"content\"><span>" + message + "</span></td>";

	var delIcon = "<td><img src=\"img/cross.png\" alt=\"cross\" class=\"cross\"></td>";

	$("tbody").append("<tr>" + checkbox + content + delIcon + "</tr>");

	id++;
}

4. Style the shopping list via CSS.

---

This awesome jQuery plugin is developed by elfenheart. For more Advanced Usages, please check the demo page or visit the official website.