Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Desafío Amigo Secreto - Validen Código

Hola quisiera que validen mi código javascript, estoy abierto a cualquier critica constructiva.

// Lista de amigos
let listaAmigos = [];

/**
 * Asigna texto a un elemento del DOM.
 * @param {string} elemento - Selector del elemento.
 * @param {string} texto - Texto a asignar.
 */
function asignarTextoElemento(elemento, texto) {
    const elementoHTML = document.querySelector(elemento);
    if (elementoHTML) {
        elementoHTML.innerHTML = texto;
    }
}

/**
 * Agrega un amigo a la lista.
 */
function agregarAmigo() {
    const nombre = document.getElementById('amigo').value.trim();

    if (!nombre) {
        alert('Por favor, ingrese un nombre válido');
        return;
    }

    listaAmigos.push(nombre);
    actualizarLista();
    limpiarCaja();
}

/**
 * Limpia el campo de entrada.
 */
function limpiarCaja() {
    document.querySelector('#amigo').value = '';
}

/**
 * Actualiza la lista de amigos en el DOM.
 */
function actualizarLista() {
    const ul = document.querySelector('#listaAmigos');
    ul.innerHTML = '';

    listaAmigos.forEach(amigo => {
        const li = document.createElement('li');
        li.textContent = amigo;
        ul.appendChild(li);
    });
}

/**
 * Realiza el sorteo de un amigo secreto y muestra el resultado.
 */
function sortearAmigo() {
    if (listaAmigos.length === 0) {
        alert("Agrega amigos antes de sortear.");
        return;
    }

    const indiceAleatorio = Math.floor(Math.random() * listaAmigos.length);
    const amigoGanador = listaAmigos[indiceAleatorio];

    mostrarResultado(amigoGanador);
    limpiarLista();
}

/**
 * Muestra el resultado del sorteo en el DOM.
 * @param {string} amigoGanador - Nombre del amigo sorteado.
 */
function mostrarResultado(amigoGanador) {
    const ulResultado = document.querySelector('#resultado');
    ulResultado.innerHTML = '';

    const li = document.createElement('li');
    li.textContent = ` El amigo secreto sorteado es: ${amigoGanador}`;
    ulResultado.appendChild(li);
}

/**
 * Limpia la lista de amigos en el DOM y en la memoria.
 */
function limpiarLista() {
    listaAmigos = [];
    actualizarLista();
}

Capturas de pantalla


Aquí puedes ver imágenes o capturas de pantalla del proyecto en acción.

  • Captura 1 - Agregar nombres

Captura 1 - Agregar nombres

  • Captura 2 - Valida nombres vacío o nulo

Captura 2 - Valida nombres vacío o nulo

  • Captura 3 - Sorteo realizado

Captura 3 - Sorteo realizado

  • Captura 4 - Valida Sorteo

Captura 4 - Valida Sorteo

1 respuesta

Hola Freddy, espero que estés bien

He revisado tu código y parece estar bien estructurado y claro. Aquí te dejo algunos comentarios y sugerencias para mejorar:

  1. Validación de nombres duplicados: Podrías agregar una verificación para evitar que se añadan nombres duplicados a la lista. Algo así podría funcionar:

    if (listaAmigos.includes(nombre)) {
        alert('Este nombre ya está en la lista.');
        return;
    }
    
  2. Mensajes de resultado más destacados: Podrías añadir estilos CSS para que el mensaje del amigo sorteado sea más visible, como cambiar el color o el tamaño de la fuente.

  3. Mejora de la interfaz de usuario: Considera agregar animaciones o transiciones suaves cuando se actualice la lista o se muestre el resultado del sorteo para mejorar la experiencia del usuario.

  4. Uso de const y let: Asegúrate de usar const para variables que no cambian de valor, como li dentro de tus funciones. Esto ayuda a mantener el código más claro y seguro.

  5. Comentarios y documentación: Tus comentarios están claros y ayudan a entender el propósito de cada función. Mantén este estilo para facilitar la comprensión de tu código en el futuro.

Espero que estas sugerencias te sean útiles y te ayuden a mejorar tu proyecto. ¡Bons estudios!