CRUD-Agregar Ítems a la Lista

        <form id="itemForm">
            <input type="text" id="itemInput" placeholder="Escribe un ítem" required>
            <button type="submit">Agregar Ítem</button>
        </form>
    
        <ul id="itemList">
            <!-- Los ítems aparecerán aquí -->
        </ul>
        

        <script>
            // Seleccionamos el formulario y la lista de ítems
            const itemForm = document.getElementById('itemForm');
            const itemInput = document.getElementById('itemInput');
            const itemList = document.getElementById('itemList');
    
            // Añadimos un listener para el envío del formulario
            itemForm.addEventListener('submit', function(event) {
                event.preventDefault(); // Evitar que la página se recargue
    
                // Obtener el valor del input
                const newItemText = itemInput.value;
    
                // Crear el nuevo ítem
                addItemToList(newItemText);
    
                // Limpiar el campo de entrada de texto
                itemInput.value = '';
            });
    
            // Función para agregar ítems a la lista
            function addItemToList(itemText) {
                const newItem = document.createElement('li');
    
                // Crear un contenedor de botones
                const buttonContainer = document.createElement('div');
                buttonContainer.classList.add('item-buttons');
    
                // Crear el contenido del ítem
                const itemSpan = document.createElement('span');
                itemSpan.textContent = itemText;
    
                // Crear el campo de edición oculto
                const editInput = document.createElement('input');
                editInput.type = 'text';
                editInput.classList.add('edit-input');
    
                // Agregar los elementos al nuevo ítem
                newItem.appendChild(itemSpan);
                newItem.appendChild(editInput);
                newItem.appendChild(buttonContainer);
    
                // Agregar el nuevo ítem a la lista
                itemList.appendChild(newItem);
    
                // Crear los botones de editar y borrar
                createEditButton(newItem);
                createDeleteButton(newItem);
            }
    
            // Función para crear y manejar el botón de editar
            function createEditButton(item) {
                const editButton = document.createElement('button');
                editButton.textContent = 'Editar';
    
                editButton.addEventListener('click', function () {
                    const itemSpan = item.querySelector('span');
                    const editInput = item.querySelector('.edit-input');
                    const isEditing = editInput.style.display === 'inline-block';
    
                    if (isEditing) {
                        // Guardar el contenido editado
                        itemSpan.textContent = editInput.value;
                        editInput.style.display = 'none';
                        editButton.textContent = 'Editar';
                    } else {
                        // Mostrar el campo de edición
                        editInput.style.display = 'inline-block';
                        editInput.value = itemSpan.textContent;
                        editButton.textContent = 'Guardar';
                    }
                });
    
                // Agregar el botón al contenedor de botones
                const buttonContainer = item.querySelector('.item-buttons');
                buttonContainer.appendChild(editButton);
            }
    
            // Función para crear y manejar el botón de borrar con confirmación
            function createDeleteButton(item) {
                const deleteButton = document.createElement('button');
                deleteButton.textContent = 'Borrar';
    
                deleteButton.addEventListener('click', function () {
                    if (confirm('¿Estás seguro de que quieres borrar este ítem?')) {
                        // Borrar el ítem seleccionado
                        itemList.removeChild(item);
                    }
                });
    
                // Agregar el botón al contenedor de botones
                const buttonContainer = item.querySelector('.item-buttons');
                buttonContainer.appendChild(deleteButton);
            }
        </script>