programacion-web/js/javascript18.js

validacion-formularios

document.addEventListener('DOMContentLoaded', function () {
    // Seleccionar elementos del DOM
    const input = document.getElementById('nuevoElemento');
    const botonAgregar = document.getElementById('agregarBtn');
    const lista = document.getElementById('lista');
    const alertEmpty = document.getElementById('alertEmpty');

    // Función para agregar un nuevo elemento a la lista
    const agregarElemento = () => {
        const texto = input.value.trim();

        if (texto === '') {
            alertEmpty.classList.remove('d-none');
            setTimeout(() => alertEmpty.classList.add('d-none'), 3000);
            return;
        }

        // Si es el primer elemento, eliminar el estado vacío
        if (lista.querySelector('.empty-state')) {
            lista.innerHTML = '';
        }

        // Crear nuevo elemento de lista
        const li = document.createElement('li');
        li.className = 'list-group-item d-flex justify-content-between align-items-center list-item';

        // Crear span para el texto
        const span = document.createElement('span');
        span.textContent = texto;

        // Crear botón de eliminar
        const botonEliminar = document.createElement('button');
        botonEliminar.className = 'btn btn-danger btn-sm';
        botonEliminar.innerHTML = '<i class="bi bi-trash"></i>';

        // Evento para eliminar el elemento
        botonEliminar.addEventListener('click', function () {
            li.remove();

            // Si no quedan elementos, mostrar estado vacío
            if (lista.children.length === 0) {
                lista.innerHTML = `
              <li class="empty-state">
                <i class="bi bi-inbox" style="font-size: 3rem;"></i>
                <h5 class="mt-3">La lista está vacía</h5>
                <p class="text-muted">Agrega elementos usando el campo superior</p>
              </li>
            `;
            }
        });

        // Agregar elementos al li
        li.appendChild(span);
        li.appendChild(botonEliminar);

        // Agregar li a la lista
        lista.appendChild(li);

        // Limpiar input
        input.value = '';
        input.focus();
    };

    // Evento click para agregar elemento
    botonAgregar.addEventListener('click', agregarElemento);

    // Evento Enter para agregar elemento
    input.addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
            agregarElemento();
        }
    });
});