Lenguaje Java Script
Ejercicio 3 - Generador de Mensajes
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generador de Mensaje</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>Generador de Mensaje Personalizado</h1>
<label for="nombre">Tu nombre:</label>
<input type="text" id="nombre" placeholder="Ingresa tu nombre">
<br><br>
<button onclick="generarMensaje()">Generar Mensaje</button>
<p id="resultado"></p>
</body>
</html>
script.js
<script>
// Función para generar un mensaje personalizado
function generarMensaje() {
// Obtener el nombre del usuario
const nombre = document.getElementById('nombre').value.trim();
// Validar que el nombre no esté vacío
if (nombre === "") {
document.getElementById('resultado').innerText = 'Por favor, ingresa un nombre.';
return;
}
// Obtener la fecha actual
const fechaActual = new Date(); // Objeto de fecha y hora actuales
const dia = fechaActual.getDate(); // Día del mes
const mes = fechaActual.getMonth() + 1; // Mes (0-11, por eso sumamos 1)
const año = fechaActual.getFullYear(); // Año completo
// Generar un número aleatorio para personalizar el mensaje
const numeroAleatorio = Math.floor(Math.random() * 100) + 1;
// Construir el mensaje
const mensaje = `Hola, ${nombre}! Hoy es ${dia}/${mes}/${año} y tu número de la suerte es ${numeroAleatorio}.`;
// Mostrar el mensaje en la página
document.getElementById('resultado').innerText = mensaje;
}
</script>
Parámetro del usuario:
🔹El usuario ingresa su nombre en el campo de texto.
🔹Usamos document.getElementById(‘nombre’).value.trim() para obtener el nombre y eliminar espacios en blanco al inicio o final con .trim().
Uso del Objeto Date:
🔹new Date(): Crea un objeto que contiene la fecha y hora actuales.
🔹.getDate(), .getMonth() + 1, .getFullYear(): Extraen el día, mes y año respectivamente.
Generar un número aleatorio:
🔹Math.random(): Genera un número aleatorio entre 0 y 1.
🔹Math.floor(Math.random() * 100) + 1: Escala este número al rango de 1 a 100 (puedes cambiar este rango).
Concatenación dinámica:
Usamos template literals con backticks ( ` ) para construir un mensaje que incluye el nombre, la fecha, y el número aleatorio.
Salida del resultado:
Mostramos el mensaje final en el elemento con id=»resultado».