A Shopping-List App built with AI

John G: Is this an easy build?

A shopping list ‘app’ on a WordPress page where a user can type items they want to go on the list in a input box and click a button that adds that item to the list.

The list appears on the page and next to each item is a check box that the user can check and that greys out the shopping list item – this is to represent the user picking up the item at the shop and crossing it off the list.

Users can also delete items

“Over to you ChatGPT”

ChatGPT:

How to Build a Shopping List App with Add, Check, and Delete Functions in WordPress

This tutorial will guide you through creating a shopping list app where users can:

✅ Add items to a list

✅ Check off items (they turn grey and get crossed out)

✅ Delete items from the list

✅ Save items so they remain after refreshing the page (using localStorage)

Step 1: Add This HTML to Your WordPress Page

Place this inside a Custom HTML block on the page where you want the shopping list to appear:

<div id="shoppingListApp">
    <input type="text" id="itemInput" placeholder="Enter an item..." />
    <button id="addItemButton">Add to List</button>
    <ul id="shoppingList"></ul>
</div>

Step 2: Add This JavaScript in WP Code Snippets

Create a new JavaScript snippet and paste this code:

// Wait for the page to load before running the script
document.addEventListener("DOMContentLoaded", function () {
    const input = document.getElementById("itemInput");
    const addButton = document.getElementById("addItemButton");
    const list = document.getElementById("shoppingList");

    // Load saved shopping list from localStorage
    const savedList = JSON.parse(localStorage.getItem("shoppingList")) || [];
    savedList.forEach(item => addListItem(item.text, item.checked));

    // Function to add an item to the list
    function addListItem(text, checked = false) {
        const li = document.createElement("li");
        li.style.display = "flex";
        li.style.alignItems = "center";
        li.style.marginBottom = "5px";

        // Checkbox
        const checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.checked = checked;
        checkbox.style.marginRight = "10px";

        // Item text
        const span = document.createElement("span");
        span.textContent = text;
        
        // Delete button
        const deleteButton = document.createElement("button");
        deleteButton.textContent = "❌";
        deleteButton.style.marginLeft = "10px";
        deleteButton.style.cursor = "pointer";

        // Apply "picked up" styling if checked
        if (checked) {
            span.style.textDecoration = "line-through";
            span.style.color = "gray";
        }

        // Add event listener to toggle item state
        checkbox.addEventListener("change", function () {
            span.style.textDecoration = checkbox.checked ? "line-through" : "none";
            span.style.color = checkbox.checked ? "gray" : "black";
            saveList();
        });

        // Add event listener to delete item
        deleteButton.addEventListener("click", function () {
            li.remove();
            saveList();
        });

        // Append elements to list item
        li.appendChild(checkbox);
        li.appendChild(span);
        li.appendChild(deleteButton);
        list.appendChild(li);

        // Save to localStorage
        saveList();
    }

    // Function to save the list to localStorage
    function saveList() {
        const items = [];
        document.querySelectorAll("#shoppingList li").forEach(li => {
            const text = li.querySelector("span").textContent;
            const checked = li.querySelector("input").checked;
            items.push({ text, checked });
        });
        localStorage.setItem("shoppingList", JSON.stringify(items));
    }

    // Add item when button is clicked
    addButton.addEventListener("click", function () {
        const itemText = input.value.trim();
        if (itemText !== "") {
            addListItem(itemText);
            input.value = ""; // Clear input field
        }
    });

    // Allow pressing "Enter" to add an item
    input.addEventListener("keypress", function (event) {
        if (event.key === "Enter") {
            addButton.click();
        }
    });
});

Step 3: Save & Activate

1️⃣ Save the WP Code Snippet and activate it.
2️⃣ Refresh your WordPress page.
3️⃣ Test adding and removing items!

🎨 Bonus: Improve Styling with CSS

To make it look cleaner, add this to a Custom CSS block or inside the WordPress Customizer → Additional CSS:

#shoppingList li {
    list-style-type: none;
    font-size: 18px;
}

#shoppingList input[type="checkbox"] {
    transform: scale(1.3);
    cursor: pointer;
}

button {
    background: none;
    border: none;
    font-size: 16px;
    color: blue;
}

John G: Here it is. All I’ve done is created the snippet and copied the code into it, added an HTML block below and copied the CSS too:

Shopping List:

    ChatGPT:

    🚀 Features You Just Built

    ✅ Users can add items dynamically
    ✅ Users can check off items, and they turn grey (crossed out)
    ✅ Users can delete items with a button
    ✅ List remembers items after refresh using localStorage
    ✅ Users can press Enter instead of clicking the button

    🛠️ Possible Next Steps

    • 📌 Drag and drop to reorder items
    • 🛍️ Group items into categories (e.g., Fruits, Vegetables, Drinks)
    • 👥 Allow multi-user syncing with a database instead of localStorage

    This is a great way to practice JavaScript! Try it out and let me know if you need any tweaks or improvements. 🚀🔥

    Leave a Comment