Agregar Ítems a la Lista

INICIO

CODE

<body>

    <h1>Agregar Ítems a la Lista</h1>

    <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>