Verificador de Números Primos 🔍

Descripción

¡Bienvenido al Verificador de Números Primos! Esta es una aplicación web sencilla y elegante que te permite verificar si un número entero es primo o no. Solo ingresa un número en el campo proporcionado, haz clic en el botón "Check" y obtén una respuesta instantánea. 🚀

Características ✨

• Interfaz intuitiva: Campo de entrada para números, botón de verificación y mensaje de resultado claro.
• Validación de entrada: Detecta si el número ingresado es válido.
• Respuesta visual: Mensajes en colores verde (primo) o rojo (no primo) para una experiencia amigable.
• Ligero y rápido: Sin dependencias externas, funciona directamente en el navegador.

Funcionamiento 📋

La aplicación funciona de la siguiente manera:

1. Entrada del usuario: El usuario ingresa un número entero en el campo de texto.
2. Verificación: Al hacer clic en el botón "Check", el JavaScript evalúa si el número es primo.
3. Resultado: Se muestra un mensaje indicando si el número es primo o no, con colores diferenciados.

Elementos de la interfaz y su utilidad

• Campo de entrada (<input type="number">): Permite al usuario ingresar el número a verificar. Solo acepta números enteros.
• Botón "Check" (<button>): Activa la verificación del número ingresado.
• Mensaje de resultado (<p>): Muestra el resultado de la verificación, con texto y color dinámicos.

Tecnologías utilizadas 🛠️

• HTML5: Estructura básica de la página web.
• CSS3: Estilos para una apariencia moderna y responsiva.
• JavaScript (ES6): Lógica para la verificación de números primos y manipulación del DOM.

Fragmentos de código destacados 💻

Aquí explicamos algunos fragmentos clave del código JavaScript, enfocándonos en la manipulación del DOM y las funciones utilizadas.

Manipulación del DOM

const numberInput = document.getElementById("numberInput");
const checkButton = document.getElementById("checkButton");
const resultMessage = document.getElementById("resultMessage");

Estos elementos se obtienen del DOM usando getElementById. Permiten acceder a los elementos HTML para leer el valor del input, escuchar clics en el botón y actualizar el texto y estilo del párrafo de resultado.

Event Listener

checkButton.addEventListener("click", function() {
    const number = parseInt(numberInput.value);
    // Validación y verificación
});

Se añade un escuchador de eventos al botón. Cuando se hace clic, se ejecuta la función anónima que obtiene el valor del input, lo convierte a entero con parseInt, valida si es un número y llama a la función isPrime.

Función de verificación de primo

function isPrime(num) {
    if (num <= 1) return false;
    if (num <= 3) return true;
    if (num % 2 === 0 || num % 3 === 0) return false;
    // Nota: Esta implementación es básica y optimizada para números pequeños.
    // Para números grandes, se recomienda verificar divisores hasta sqrt(num).
    return true;
}

Esta función determina si un número es primo. Aplica reglas básicas: números menores o iguales a 1 no son primos, 2 y 3 sí lo son, y descarta múltiplos de 2 o 3. Conceptos aplicados: operadores aritméticos (%), condicionales (if), y lógica booleana.

Actualización del resultado

resultMessage.textContent = `The number ${number} is a prime number.`;
resultMessage.style.color = "green";

Se actualiza el texto del párrafo con textContent y se cambia el color con style.color. Esto demuestra manipulación dinámica del DOM para proporcionar retroalimentación visual al usuario.

Cómo descargar el código desde GitHub

1. Ve al repositorio en GitHub Enlace al repositorio.

2. Haz clic en el botón "Code" y selecciona "Download ZIP" o clona el repositorio con:

   git clone https://github.com/Seb-RM/Javascript_Html_Css-Prime-Number-Checker.git
   

3. Abre el archivo index.html en tu navegador.

Instrucciones de uso 📖

1. Abre el archivo index.html en tu navegador web favorito.
2. Ingresa un número entero en el campo de entrada.
3. Haz clic en el botón "Check".
4. Observa el mensaje de resultado: si es verde, el número es primo; si es rojo, no lo es.

¡Disfruta verificando números primos! 🧮