Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación
Dificultad
beginnerRepositorio
Clic para abrirVideo
Clic para abrirDemo en vivo
No disponible
Duración promedio
4 hrs
Tecnologías
En este proyecto, aprenderás cómo cambiar los estilos de tu sitio web durante el tiempo de ejecución utilizando VanillaJS (plain normal js).
Crea un algoritmo que genere aleatoriamente una carta en cada actualización:
Cada vez que el sitio web actualiza una nueva carta aleatoria debe mostrarse.
La carta debe tener una de las posibles palo/pinta: Corazones, Picas, Clubes y Diamantes.
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.
No clones este repositorio porque vamos a usar una plantilla diferente.
Recomendamos abrir el vanilla.js boilerplate
usando una herramienta de aprovisionamiento 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:
https://github.com/4GeeksAcademy/vanillajs-hello.git
👉 Por favor sigue estos pasos cómo comenzar un proyecto de codificació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.
Recuerda que el primer evento en el ciclo de vida de un sitio web es onLoad (su código comienza a ejecutarse allí), debe 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 tarjeta.
Crea una clase general .card que aplique los estilos generales a cada carta, y una clase CSS adicional para cada palo/pinta: .spade, .club, .heart & .diamond.
Aplica la clase .card a toda la división, pero solo aplica una de las clases de la pinta/palo a la vez, dependiendo de la pinta/palo que desees aplicar. Por ejemplo, un 3 de corazones tendrá esta declaración HTML:
1 <div class='card heart'></div>
¡Los siguientes requeriemientos 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 timer que genere una nueva carta automaticamente 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 Curso de Programación para convertirte en Full Stack Developer, o nuestro Data Science Bootcamp.
Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación
Dificultad
beginnerRepositorio
Clic para abrirVideo
Clic para abrirDemo en vivo
No disponible
Duración promedio
4 hrs
Tecnologías