Creating A Simple Shopping List Using jQuery

File Size: 15 KB
Views Total: 9175
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></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 class="list">
<table class="items">
<th class="edit" colspan="3"><span>edit</span></th>

3. The javascript.

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

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

	$("tbody").on("click", ".cross", function() {

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

	$("tbody").on("click", ".box", function() {


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

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

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

	if ((input !== "") && ($.trim(input) !== "")) {

	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>");


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.