https://github.com/breatheco-de/exercise-random-card
💻📹Video Tutorial: Ideal project tutorial for Javascript newbies, build a random card dealer with little JS, HTML and CSS.
https://github.com/breatheco-de/exercise-random-card
css3 html html5 javascript learn-javascript learn-to-code learning-by-doing learning-exercise learning-js the-dom tutorial tutorial-code tutorial-sourcecode video-tutorial
Last synced: 6 days ago
JSON representation
💻📹Video Tutorial: Ideal project tutorial for Javascript newbies, build a random card dealer with little JS, HTML and CSS.
- Host: GitHub
- URL: https://github.com/breatheco-de/exercise-random-card
- Owner: breatheco-de
- License: other
- Created: 2020-04-04T04:56:17.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-02-04T16:10:15.000Z (about 1 year ago)
- Last Synced: 2025-02-04T17:23:54.381Z (about 1 year ago)
- Topics: css3, html, html5, javascript, learn-javascript, learn-to-code, learning-by-doing, learning-exercise, learning-js, the-dom, tutorial, tutorial-code, tutorial-sourcecode, video-tutorial
- Homepage: https://projects.breatheco.de/interactive-coding-tutorial/beginner/random-card
- Size: 220 KB
- Stars: 1
- Watchers: 6
- Forks: 180
- Open Issues: 0
-
Metadata Files:
- Readme: README.es.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Generador de cartas al azar con JavaScript, HTML y CSS
En este proyecto, aprenderás cómo cambiar los estilos de tu sitio web durante el tiempo de ejecución utilizando [VanillaJS](https://stackoverflow.com/questions/20435653/what-is-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](https://github.com/breatheco-de/exercise-random-card/blob/master/preview.gif?raw=true).
## 🌱 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](https://4geeks.com/es/lesson/tutorial-de-github-codespaces) (recomendado) o [Gitpod](https://4geeks.com/es/lesson/como-utilizar-gitpod). Alternativamente, puedes clonarlo en tu computadora local usando el comando `git clone`.
Este es el repositorio que necesitas abrir o clonar:
```text
https://github.com/4GeeksAcademy/vanillajs-hello
```
**👉 Por favor sigue estos pasos sobre** [cómo comenzar un proyecto de programación](https://4geeks.com/es/lesson/como-comenzar-un-proyecto-de-codificacion).
> 💡 Importante: Recuerda guardar y subir tu código a GitHub creando un nuevo repositorio, actualizando el remoto (`git remote set-url origin `) 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í)](https://www.w3schools.com/jsref/event_onload.asp), 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:
```html
```
- Copia y pega estos emojis dentro te 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](https://4geeksacademy.com/es/aprender-a-programar/aprender-a-programar-desde-cero) por parte de los alumnos de 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) realizado por [Alejandro Sánchez](https://twitter.com/alesanchezr) y muchos otros contribuyentes. Conoce más sobre nuestros [Curso de Programación](https://4geeksacademy.com/es/curso-de-programacion-desde-cero?lang=es) para convertirte en [Full Stack Developer](https://4geeksacademy.com/es/coding-bootcamps/desarrollador-full-stack/?lang=es), o nuestro [Data Science Bootcamp](https://4geeksacademy.com/es/coding-bootcamps/curso-datascience-machine-learning).