Project Overview
The Grocery List Application is a user-friendly web application that allows users to manage a list of grocery items. This includes adding new items, editing existing items, deleting individual items, and clearing the entire list. The application uses HTML, CSS, JavaScript, and jQuery for functionality and styling.
Features
- Adding Items
Users can type a grocery item into the input field and click the "Submit" button to add it to the list.
Newly added items appear at the top of the list.
- Editing Items
Each item has an edit button (pencil icon). Clicking it allows the user to modify the item's text.
The item's text appears in the input field, where it can be updated and saved by clicking "Submit."
- Deleting Items
Each item has a delete button (trash icon). Clicking it removes the item from the list.
- Clearing All Items
A "Clear Items" button is available to remove all items from the list at once.
- Input Validation
The application ensures that the input field is not empty before adding or updating items. An alert message prompts the user if the field is empty.
Technologies Used
HTML: Defines the structure of the application.
CSS: Provides styling for the application (linked through styles.css).
JavaScript: Handles the application's functionality, including adding, editing, and deleting items.
Font Awesome: Supplies icons for the edit and delete buttons.
jQuery: Simplifies DOM manipulation and enhances functionality.
File Structure
project-folder/ ├── index.html # Main HTML file for the application ├── styles.css # External CSS file for styling └── README.md # Documentation
How It Works
JavaScript Functions
- mainBtn()
Triggered when the "Submit" button is clicked.
Validates input and decides whether to create a new item or update an existing one.
- createItem()
Dynamically creates a new grocery item and appends it to the list.
Uses insertAdjacentHTML to add the item at the top of the list.
- editItem(row)
Fills the input field with the text of the selected item.
Sets selectedRow to the item being edited.
- updateItem()
Updates the text of the selected item based on the input field's value.
Resets selectedRow to null after updating.
- deleteItem(row)
Deletes the specific item associated with the clicked delete button.
- deleteAll()
Removes all items in the list using querySelectorAll to target and iterate through them.
- validate()
Ensures that the input field is not empty before proceeding.
Displays an alert if the input is empty.
How to Use
Open the index.html file in a web browser.
Add items to the grocery list by typing in the input field and clicking "Submit."
Edit or delete items using the respective buttons next to each item.
Clear all items by clicking the "Clear Items" button.
Future Improvements
Enhance the UI for better responsiveness and aesthetics.
Implement drag-and-drop reordering of items.