Grocery Bud Code

Here's a detailed documentation for the Grocery Bud Application, which is a basic to-do application that allows users to add, mark as completed, edit, and delete grocery items.

HTML (index.html)

The HTML file sets up the basic structure of the application. It includes a heading, an input area for adding new items, and an unordered list where the items will be displayed.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Food Menu</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div>
    <h1>Grocery Bud</h1>
    <div class="inputArea">
      <input type="text" placeholder="Write here something" />
      <button id="submit">Submit</button>
    </div>
    <ul>
      <!-- List items will be dynamically added here -->
    </ul>
  </div>
  <script src="app.js"></script>
</body>
</html>

CSS (style.css)

The CSS file provides basic styling for the application, making it visually appealing and easy to use.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1, h2, h3 {
  text-align: center;
}

.inputArea {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  align-items: center;
  margin-top: 20px;
  gap: 20px;
}

li {
  width: 60%;
  display: flex;
  justify-content: space-between;
}

JavaScript (app.js)

The JavaScript file contains the functionality for the application. It handles adding new items, marking items as completed, and the initial setup for editing and deleting items.

const submit = document.querySelector("#submit");
const input = document.querySelector("input");
const ul = document.querySelector("ul");

submit.addEventListener("click", () => {
  console.log(input.value); // Logs the input value to the console
  const li = document.createElement("li"); // Creates a new list item element
  li.innerHTML = `
    <input onclick='itemCompleted(this)' type="checkbox" />
    <p>${input.value}</p>
    <div>
      <button>Edit</button>
      <button>Delete</button>
    </div>`;
  ul.appendChild(li); // Adds the new list item to the unordered list
  input.value = ""; // Clears the input field
});

function itemCompleted(list) {
  if (list.nextElementSibling.style.textDecoration == "line-through") {
    list.nextElementSibling.style.textDecoration = "none";
  } else {
    list.nextElementSibling.style.textDecoration = "line-through";
  }
}

Explanation of JavaScript

  1. Selecting Elements:

    • const submit = document.querySelector("#submit");: Selects the submit button.

    • const input = document.querySelector("input");: Selects the input field.

    • const ul = document.querySelector("ul");: Selects the unordered list where items will be displayed.

  2. Adding Event Listener to Submit Button:

    • submit.addEventListener("click", () => { ... }): Adds an event listener to the submit button that triggers when the button is clicked.
  3. Creating and Appending List Item:

    • const li = document.createElement("li");: Creates a new list item element.

    • li.innerHTML = ...: Sets the inner HTML of the list item, including a checkbox, the input value as a paragraph, and Edit and Delete buttons.

    • ul.appendChild(li);: Appends the new list item to the unordered list.

    • input.value = "";: Clears the input field after adding the item.

  4. Marking Items as Completed:

    • function itemCompleted(list) { ... }: Defines a function to toggle the completion status of a list item.

    • if (list.nextElementSibling.style.textDecoration == "line-through") { ... } else { ... }: Toggles the text decoration of the item's text between 'line-through' (completed) and 'none' (not completed).

Future Enhancements

  1. Editing Items: Implement functionality to edit existing items.

  2. Deleting Items: Implement functionality to delete items from the list.

  3. Local Storage: Save the items to local storage so that they persist after page reloads.

This documentation should help your students understand the structure and functionality of the Grocery Bud Application, making it easier for them to modify and enhance the code as needed.