Introducción
Si estás empezando con JavaScript y quieres practicar la manipulación del DOM, eventos y API externas, este proyecto es perfecto para ti. Vamos a crear una página web que muestre imágenes aleatorias usando Picsum Photos y frases temáticas para el 14 de febrero.
En este artículo, explicaremos paso a paso cómo funciona el código y cómo puedes adaptarlo para otros proyectos.
Código Completo
Aquí está el código HTML y JavaScript que vamos a analizar:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mensajes y Fotos Aleatorias para San Valentín</title>
<meta name="description" content="Disfruta de imágenes aleatorias y frases románticas para el Día del Amor y la Amistad. Celebra el 14 de febrero con mensajes especiales y comparte el amor.">
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
background-color: #ffe6e6;
}
img {
width: 400px;
height: 300px;
border-radius: 10px;
margin-top: 20px;
}
#texto {
margin-top: 20px;
font-size: 20px;
font-weight: bold;
color: #d63384;
}
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #ff4d6d;
color: white;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #e63950;
}
</style>
</head>
<body>
<h1>💖 Feliz 14 de Febrero 💖</h1>
<img id="imagen" src="https://picsum.photos/400/300" alt="Imagen aleatoria">
<div id="texto"></div>
<button onclick="cambiarImagenYTexto()">💘 Nuevo mensaje 💘</button>
<script>
function cambiarImagenYTexto() {
// Frases temáticas para el 14 de febrero
const textos = [
"El amor se celebra todos los días, pero hoy con más 💕",
"La amistad un regalo que dura para siempre. ¡Feliz San Valentín! 🎁",
"Hoy es un buen día para recordar a la gente que quieres ❤️",
"Un abrazo, un beso y una sonrisa... ¡Feliz valentin! 😘",
"No hay amor más sincero que aquel que es sincero 💗"
];
// Selecciona un mensaje aleatorio
const textoAleatorio = textos[Math.floor(Math.random() * textos.length)];
// Muestra el mensaje correctamente en la página
document.getElementById("texto").innerHTML = textoAleatorio;
// Cambia la imagen aleatoria de Picsum
document.getElementById("imagen").src = `https://picsum.photos/400/300?t=${new Date().getTime()}`;
}
// Llamar la función al cargar la página
cambiarImagenYTexto();
</script>
</body>
</html>
Explicación del Código
1. HTML: Estructura de la Página
El documento HTML define la estructura de la página. Contiene:
Un título en <h1> con un mensaje especial.
Una imagen aleatoria cargada desde Picsum Photos.
Un div para mostrar el mensaje aleatorio.
Un botón que permite actualizar la imagen y el mensaje.
2. CSS: Estilos Básicos
El código CSS personaliza la apariencia de la página con:
Fondo rosado para dar un estilo romántico.
Botón estilizado con un color llamativo y efecto hover.
Texto en color rosa oscuro para destacar el mensaje.
3. JavaScript: Lógica de la Página
Función cambiarImagenYTexto()
Esta función se encarga de cambiar la imagen y el texto cuando se presiona el botón.
Seleccionamos un mensaje aleatorio
const textos = [
"El amor se celebra todos los días, pero hoy con más razón. 💕",
"La amistad es un regalo dura para siempre. ¡Feliz San Valentín! 🎁",
"Hoy es un buen día para recordarte el amor.❤️",
"Un abrazo, un beso y una sonrisa... ¡Feliz Valentin day! 😘",
"No hay amor más sincero que aquel que se comparte. 💗"
];
const textoAleatorio = textos[Math.floor(Math.random() * textos.length)];
Se crea un array con frases temáticas.
Se elige un mensaje aleatorio con Math.random().
Mostramos el mensaje en el div #texto
document.getElementById("texto").innerHTML = textoAleatorio;
Se usa innerHTML para mostrarlo correctamente sin errores con signos de exclamación.
Cambiamos la imagen aleatoria
document.getElementById("imagen").src = `https://picsum.photos/400/300?t=${new Date().getTime()}`;
La URL https://picsum.photos/400/300 carga una imagen aleatoria.
Se agrega ?t=${new Date().getTime()} para evitar que el navegador use la misma imagen en caché.
Ejecutamos la función al cargar la página
cambiarImagenYTexto();
Esto hace que la página cargue con una imagen y un mensaje desde el inicio.
Cómo Personalizarlo
Puedes adaptar este código para diferentes eventos, cambiando:
✅ Las frases para otro tema como motivación o chistes.
✅ Los colores en CSS para ajustarlo a otra festividad.
✅ El tamaño de las imágenes en la URL de Picsum Photos.
Conclusión
Este proyecto es una forma sencilla pero efectiva de practicar JavaScript. Aprendiste a manipular el DOM, generar valores aleatorios y trabajar con una API externa.
Prueba nuestra página en la siguiente url
https://www.programacionparatodos.com/p/mensajes-y-fotos-aleatorias-para-san.html
¡Anímate a modificarlo y compartir tu version!
Comentarios
Publicar un comentario
Dejanos tus dudas y comentarios