Generador de tarjetas de felicitación aleatorias

Introducción

En este proyecto, aprenderás a crear una tarjeta de felicitación para las fiestas que muestre saludos aleatorios cuando se haga clic en el botón "Escribir". Este proyecto te ayudará a entender cómo trabajar con funciones de JavaScript, oyentes de eventos y manipulación del DOM.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar el entorno del proyecto
• Cómo implementar una función para seleccionar aleatoriamente un saludo de una matriz predefinida
• Cómo implementar una función para mostrar el saludo seleccionado en la tarjeta de felicitación
• Cómo agregar un oyente de eventos al botón "Escribir" para desencadenar la visualización del saludo

🏆 Logros

Después de completar este proyecto, podrás:

• Utilizar funciones de JavaScript para generar contenido aleatorio
• Manipular el DOM para actualizar el contenido de un elemento HTML
• Agregar oyentes de eventos para desencadenar acciones específicas
• Trabajar con una estructura de proyecto proporcionada y seguir instrucciones paso a paso

Configura la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

├── index.css
├── index.html
└── index.js

Donde:

• index.css es el archivo de estilo para este desafío.
• index.js es el archivo de JavaScript que se debe completar para este desafío.
• index.html es la página de la tarjeta de felicitación.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Implementa la función writeGreeting()

En este paso, implementarás la función writeGreeting() para seleccionar aleatoriamente un saludo del arreglo greetings proporcionado.

1. Abre el archivo index.js.
2. Localiza la función writeGreeting() y reemplaza el comentario // TODO con el siguiente código:

return greetings[Math.floor((Math.random() * 10) % greetings.length)];

Este código genera un índice aleatorio dentro del arreglo greetings y devuelve el saludo correspondiente.

Implementa la función show()

En este paso, implementarás la función show() para mostrar el saludo en el elemento greetingDisplay.

1. Abre el archivo index.js.
2. Localiza la función show() y reemplaza el comentario // TODO con el siguiente código:

greetingDisplay.innerHTML = writeGreeting();

Este código llama a la función writeGreeting() para obtener un saludo aleatorio y luego establece el innerHTML del elemento greetingDisplay para mostrar el saludo.

3. Guarda el archivo index.js.
4. Actualiza la vista "Web 8080" en la VM para ver la tarjeta de felicitación en acción. Haz clic en el botón "Escribir" para mostrar un saludo aleatorio.

¡Felicitaciones! Has completado el proyecto de Tarjeta de Felicitación para las Fiestas.

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.