Interactive List Maker

CODE FOLLOWS

<div id="page">
    <?php
    include('includes/header.php');

    echo '<h1 class="page-heading">Interactive List Maker</h1>';
    echo '<div class="content-area">';
    echo '<div class="list-form">';

    // Display the form to select the list type
    echo '<form id="item-type" method="POST">
             <label for="item-type-select">Select List Type: </label>
             <select id="item-type-select" name="item-type-select" onchange="this.form.submit()">
             <option value="default">Custom</option>
             <option value="grocery"' . (isset($_POST['item-type-select']) && $_POST['item-type-select'] == 'grocery' ? ' selected' : '') . '>Grocery</option>
             <option value="todo"' . (isset($_POST['item-type-select']) && $_POST['item-type-select'] == 'todo' ? ' selected' : '') . '>To-Do</option>
             <option value="shopping"' . (isset($_POST['item-type-select']) && $_POST['item-type-select'] == 'shopping' ? ' selected' : '') . '>Shopping</option>
             </select>
          </form>';

    // Initialize the list based on the selected type
    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        $selectedType = $_POST['item-type-select'];

        // Define the lists based on selection
        if ($selectedType == 'grocery') {
            $default_items = ["Milk", "Bread", "Eggs", "Butter", "Cheese"];
            $l = "Grocery";
        } elseif ($selectedType == 'todo') {
            $default_items = ["Buy groceries", "Finish homework", "Call mom", "Walk the dog"];
            $l = "To-Do";
        } elseif ($selectedType == 'shopping') {
            $default_items = ["Shoes", "T-shirt", "Laptop", "Headphones"];
            $l = "Shopping";
        } else {
            $default_items = ["Let your Imagination run free!"];
            $l = "Custom";
        }
    } else {
        $default_items = ["Please select a list type"];
        $l = "List";
    }

    // Display the form to add an item
    echo '<form id="item-form">
            <label for="new_item">Add Items:</label>
            <input type="text" id="new_item" placeholder="Enter item" required>
            <button type="submit">Add Item</button>
          </form>';
    echo '</div>';
    echo '<div class="content-right">';
    echo '<pre>';
    echo '<p>Example ' . $l . ' List: (' . implode(", ", $default_items) . ')</p>';

    // Display the list of items based on selection
    echo '<h2>Your ' . $l . ' List:</h2>';
    echo '<ul id="item-list">';
    foreach ($default_items as $item) {
        echo "<li>$item</li>";
    }
    echo '</ul>';
    echo '</pre>';
    echo '</div>';
    echo '</div>';
    ?>

    <script>
        // PHP passes the $default_items array to JavaScript using json_encode()
        const itemsKey = 'userList';

        // Get the items either from localStorage or initialize with PHP default items
        const storedItems = JSON.parse(localStorage.getItem(itemsKey)) || <?php echo json_encode($default_items); ?>;

        // Function to display the items list on the page
        function displayItems(items) {
            const itemList = document.getElementById('item-list');
            itemList.innerHTML = ''; // Clear the list before re-rendering

            // Iterate over the array and create a list item for each
            items.forEach(function(item, index) {
                const listItem = document.createElement('li');

                // Create the delete button for each item
                const deleteButton = document.createElement('button');
                deleteButton.textContent = 'Delete';
                deleteButton.className = 'delete-button';
                deleteButton.onclick = function() {
                    deleteItem(index); // Call the delete function when clicked
                };

                // Append the delete button and item text
                listItem.appendChild(deleteButton);
                listItem.appendChild(document.createTextNode(item));
                itemList.appendChild(listItem); // Add the list item to the page
            });
        }

        // Function to delete an item from the list
        function deleteItem(index) {
            // Remove the item from the array at the given index
            storedItems.splice(index, 1);

            // Store the updated array back to localStorage
            localStorage.setItem(itemsKey, JSON.stringify(storedItems));

            // Re-render the list after deletion
            displayItems(storedItems);
        }

        // Display the stored items when the page loads
        displayItems(storedItems);

        // Add event listener to handle adding an item
        document.getElementById('item-form').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent form submission

            const newItem = document.getElementById('new_item').value.trim();
            if (newItem && !storedItems.includes(newItem)) {
                // Add the new item to the list
                storedItems.push(newItem);

                // Update localStorage with the new array
                localStorage.setItem(itemsKey, JSON.stringify(storedItems));

                // Re-render the list after adding
                displayItems(storedItems);
            }

            // Clear the input field after adding
            document.getElementById('new_item').value = '';
        });
    </script>

    <?php
    include('includes/footer.php');
    ?>
</div>