Simple Grocery Check List App in JavaScript Free Source Code

Introduction

This is a mini-project called Grocery Check List App. This is a web-based mini-project that was developed in JavaScript, HTML, and CSS. The application allows the user to store their grocery checklist items. The application contains a CRUD Operation or Create, Read, Update, and Delete Functionalities. The data is being stored using the browser's local storage. It has a simple and pleasant user interface using Bootstrap Framework version 5 to give the user a better experience while using the app in terms of the UI design. The application contains user-friendly features and functionalities.

About the Grocery Check List App

I developed this project using the following:

• HTML
• CSS
• JavaScript
• jQuery
• Bootstrap v5
• Font-Awesome

This Grocery Check List App allows the user to store multiple grocery items that they are planning to buy so they could avoid missing some of the items. The application list all the grocery items and the user can add them by clicking the 'Add New Item' button, and by doing that will trigger the application to open a form modal where the user will enter the item details. Users can also update and delete the item details. Also, the user can mark check to the item that is already on hand. If the item checkbox is marked checked, the item details text color will change and the text will have line-through so the user can easily identify the onhand items. Users can also search for the item from the list.

Here, you can learn how to manipulate DOM in JavaScript and you will have knowledge on how to manage array or JSON data in javascript and store or manage it using the web browser's local storage. The application user interface was developed with the bootstrap v5 framework.

Features

• Add New Grocery Item Details
• List All Grocery Items
• Edit Grocery Item Details
• Delete Grocery Item Details with Confirmation
• Search Grocery Item's Details in the Table
• Mark Check the On-hand items

The source code was developed only for educational purposes only. You can download the source code for free and modify it the way you wanted.

Sample Snapshot of the Application

Application's Page Interface

Item Form Modal

How to Run ??

1. Download the provided source code zip file. (download button is located below)
2. Extract the downloaded source code zip file in your desired location.
3. Locate the index.html file inside the extracted source code folder.
4. Open the index.html file in your preferred web browser.
5. Or, Browse the Grocery Check List App in a browser. i.e. file:///C:/users/default/desktop/grocery_list/index.html

DEMO VIDEO

That's it. I hope this simple Grocery Check List App in JavaScript will help you with what you are looking for and you'll find something useful for your future web application projects.

Explore more on this website for more Free Source Codes and Tutorials.

Enjoy :)