Generador de Cartas Aleatorias

En este proyecto, aprenderás cómo cambiar los estilos de tu sitio web durante el tiempo de ejecución utilizando VanillaJS (JavaScript estándar).

📝 Instrucciones

Crea un algoritmo que genere aleatoriamente una carta en cada actualización:

1. Cada vez que el sitio web se actualice, una nueva carta aleatoria debe mostrarse.

2. La carta debe tener uno de los posibles palos: Corazones, Picas, Tréboles y Diamantes.

3. El valor de la carta debe ser uno de los siguientes: 2 a 10, Rey, Reina, Jota o As (sin comodín).

Al final, el proyecto debe ser similar a esta demostración.

🌱 Cómo comenzar este proyecto

No clones este repositorio porque vamos a usar una plantilla diferente.

Recomendamos abrir el vanilla.js boilerplate usando un entorno de desarrollo como Codespaces (recomendado) o Gitpod. Alternativamente, puedes clonarlo en tu computadora local usando el comando git clone.

Este es el repositorio que necesitas abrir o clonar:

1https://github.com/4GeeksAcademy/vanillajs-hello.git

👉 Por favor sigue estos pasos sobre cómo comenzar un proyecto de programación.

💡 Importante: Recuerda guardar y subir tu código a GitHub creando un nuevo repositorio, actualizando el remoto (git remote set-url origin <your new url>) y subiendo el código a tu nuevo repositorio usando los comandos add, commit y push desde la terminal de git.

💡 Pistas

• Recuerda que el primer evento en el ciclo de vida de un sitio web es onLoad (tu código comienza a ejecutarse allí), debes generar un número aleatorio entre 1 y 4 para elegir un palo y otro número aleatorio entre 0 y 12 para elegir un número de carta.

• Crea una clase general .card que aplique los estilos comunes a cada carta, y una clase CSS adicional para cada palo: .spade, .club, .heart & .diamond.

• Aplica la clase .card a todo el div, pero solo aplica una de las clases del palo de la carta a la vez, dependiendo del palo que desees aplicar. Por ejemplo, un 3 de corazones tendrá esta declaración HTML:

1<div class='card heart'></div>

• Copia y pega estos íconos dentro de tu código para los símbolos: ♦ ♥ ♠ ♣

😎 ¿Te sientes seguro?

¡Los siguientes requerimientos no son necesarios para completar satisfactoriamente el proyecto, pero puedes intentar retarte a ti mismo!

+1 Agrega un botón que genere una nueva carta cuando sea apretado.

+1 Agrega un temporizador que genere una nueva carta automáticamente cada 10 segundos.

+1 Permítele al usuario especificar el width y height de la carta utilizando text-inputs.

Este y otros proyectos son usados para aprender a programar por parte de los alumnos de 4Geeks Academy Coding Bootcamp realizado por Alejandro Sánchez y muchos otros contribuyentes. Conoce más sobre nuestros Cursos de Programación para convertirte en Full Stack Developer, o nuestro Data Science Bootcamp.