Tutorial para mostrar una frase motivadora aleatoria
Esta función de JavaScript es muy sencilla, la idea original es colocar esta frase en el home de un sitio web para que cada que abre se cargue una frase diferente dentro de las disponibles dentro de un array. Vamos a ello!
Para comenzar vamos a crear un archivo HTML
<!DOCTYPE html><htmllang="es"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Mensaje aleatorio</title></head><body><h1>Mensajes aleatorios con JavaScript</h1><pid="mensaje"></p></body></html>Para efectos prácticos no nos detendremos en la creación de un archivo CSS y JS (que podríamos pero en este caso no lo haremos).
En el mismo archivo agregamos en la cabezera de nuestro sitio las etiquetas <style></style> y dentro de ellas nuestro misero código CSS para las frases 😁.
<!DOCTYPE html><htmllang="es"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Mensaje aleatorio</title><style>#mensaje{
font-size: 3rem;
}
</style></head><body></body></html>Añadimos entre nuestro body un encabezado y una etiqueta de párrafo con el id “mensaje”.
<!DOCTYPE html><htmllang="es"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Mensaje aleatorio</title><style>#mensaje{
font-size: 3rem;
}
</style></head><body><h1>Mensajes aleatorios con JavaScript</h1><pid="mensaje"></p></body></html>Como puedes observar la etiqueta de párrafo no tiene contenido, esto es a propósito ya que en ese lugar aparecerán nuestras frases aleatorias.
Bien, continuamos con nuestro script JS.
Después de la etiqueta de cierre del párrafo añadimos nuestras etiquetas de <script> </script> y entre ellas agregaremos nuestro código JS.
<!DOCTYPE html><htmllang="es"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Mensaje aleatorio</title><style>#mensaje{
font-size: 3rem;
}
</style></head><body><h1>Mensajes aleatorios con JavaScript</h1><pid="mensaje"></p><script></script></body></html>Primeramente declararemos un par de variables la primera con el nombre frases que contendrá nuestro array de 5 frases motivadoras, y la segunda variable obtendrá nuestro elemento HTML con el id “mensaje” para posteriormente “vaciar” una de las frases del array.
const frases = [
"Cada día es una nueva oportunidad para aprender, crecer y acercarte a tus sueños. ¡No dejes que nada te detenga!",
"El esfuerzo y la dedicación son la clave para alcanzar tus metas académicas. ¡Confía en ti mismo y sigue adelante!",
"Recuerda que cada desafío que enfrentas en el aula es una oportunidad para fortalecer tu mente. ¡No te rindas, estás construyendo un futuro brillante!",
"El conocimiento es un tesoro que nadie puede arrebatarte. Así que absorbe todo lo que puedas y prepárate para brillar con tu sabiduría.",
"Tus estudios son el cimiento de tus logros futuros. Mantén tu determinación alta y tus metas aún más altas. ¡Puedes lograrlo!",
];
const frase = document.getElementById("mensaje");
Ahora crearemos una función donde obtengamos de manera aleatoria una frase del array y la coloque como texto dentro de nuestro elemento HTML
functionmandarFrase(){
const aleatorio = Math.floor(Math.random() * frases.length);
frase.textContent = frases[aleatorio];
}
Como puedes ver dentro de la función “mandarFrase” creamos una variable de tipo const con el nombre aleatorio, y esta variable es igual a la operación siguiente:
la función Math.random() genera un número aleatorio de coma flotante entre 0 y menor a 1, este número se multiplica por la longitud de nuestro array, ese resultado se “redondea” con la función Mathfloor, si el resultado es 2.4 MathFloor lo “redondea” a 2 o si el resultado es 2.5 lo redondea a 3. Este número es el que se guarda en la variable aleatorio.
Posteriormente le añadimos a la variable frase que incluya el valor del array frases y dentro de sus corchetes el valor de la variable aleatorio, esto hará que dentro del elemento HTML se añada el texto que corresponde.
Finalmente ejecutamos nuestra función y listo!
mandarFrase();El resultado será que cada que se recargue nuestra página aparecerá una frase distinta de nuestro array.
