{"id":48612406,"url":"https://github.com/breatheco-de/exercise-random-card","last_synced_at":"2026-04-09T00:35:09.943Z","repository":{"id":37275396,"uuid":"252912287","full_name":"breatheco-de/exercise-random-card","owner":"breatheco-de","description":"💻📹Video Tutorial: Ideal project tutorial for Javascript newbies, build a random card dealer with little JS, HTML and CSS.","archived":false,"fork":false,"pushed_at":"2025-02-04T16:10:15.000Z","size":225,"stargazers_count":1,"open_issues_count":0,"forks_count":180,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-04T17:23:54.381Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://projects.breatheco.de/interactive-coding-tutorial/beginner/random-card","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/breatheco-de.png","metadata":{"files":{"readme":"README.es.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-04T04:56:17.000Z","updated_at":"2025-02-04T16:10:19.000Z","dependencies_parsed_at":"2023-02-15T18:01:35.913Z","dependency_job_id":"e36938cd-8858-4486-8afa-8252f67cd916","html_url":"https://github.com/breatheco-de/exercise-random-card","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/breatheco-de/exercise-random-card","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/breatheco-de%2Fexercise-random-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/breatheco-de%2Fexercise-random-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/breatheco-de%2Fexercise-random-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/breatheco-de%2Fexercise-random-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/breatheco-de","download_url":"https://codeload.github.com/breatheco-de/exercise-random-card/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/breatheco-de%2Fexercise-random-card/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31580213,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2026-04-09T00:35:09.250Z","updated_at":"2026-04-09T00:35:09.914Z","avatar_url":"https://github.com/breatheco-de.png","language":null,"readme":"\u003c!--hide--\u003e\n# Generador de cartas al azar con JavaScript, HTML y CSS\n\u003c!--endhide--\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg height=\"200px\" src=\"https://github.com/breatheco-de/exercise-random-card/blob/master/preview.gif?raw=true\" /\u003e\n\u003c/p\u003e\n\nEn 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).\n\n## 📝 Instrucciones\n\nCrea un algoritmo que genere aleatoriamente una carta en cada actualización:\n\n1. Cada vez que el sitio web se actualice, una nueva carta aleatoria debe mostrarse.\n\n2. La carta debe tener uno de los posibles palos: Corazones, Picas, Tréboles y Diamantes.\n\n3. El valor de la carta debe ser uno de los siguientes: 2 a 10, Rey, Reina, Jota o As (sin comodín).\n\nAl final, el proyecto debe ser similar a [esta demostración](https://github.com/breatheco-de/exercise-random-card/blob/master/preview.gif?raw=true).\n\n\u003conlyfor saas=\"false\" withBanner=\"false\"\u003e\n  \n## 🌱 Cómo comenzar este proyecto\n\nNo clones este repositorio porque vamos a usar una plantilla diferente.\n\nRecomendamos 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`.\n\nEste es el repositorio que necesitas abrir o clonar:\n\n```text\nhttps://github.com/4GeeksAcademy/vanillajs-hello\n```\n\n**👉 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).\n\n\u003e 💡 Importante: Recuerda guardar y subir tu código a GitHub creando un nuevo repositorio, actualizando el remoto (`git remote set-url origin \u003cyour new url\u003e`) y subiendo el código a tu nuevo repositorio usando los comandos `add`, `commit` y `push` desde la terminal de git.\n\n\u003c/onlyfor\u003e\n\n## 💡 Pistas\n\n- 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.\n\n- Crea una clase general `.card` que aplique los estilos comunes a cada carta, y una clase CSS adicional para cada palo: `.spade`, `.club`, `.heart` \u0026 `.diamond`.\n\n- 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:\n\n```html\n\u003cdiv class='card heart'\u003e\u003c/div\u003e\n```\n\n- Copia y pega estos emojis dentro te tu código para los símbolos: ♦ ♥ ♠ ♣\n\n\n## 😎 ¿Te sientes seguro?\n\n¡Los siguientes requerimientos no son necesarios para completar satisfactoriamente el proyecto pero puedes intentar retarte a ti mismo!\n\n`+1` Agrega un botón que genere una nueva carta cuando sea apretado.\n\n`+1` Agrega un temporizador que genere una nueva carta automáticamente cada 10 segundos.\n\n`+1` Permítele al usuario especificar el *width* y *height* de la carta utilizando text-inputs.\n\n\u003c!--hide--\u003e\nEste 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).\n\u003c!--endhide--\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbreatheco-de%2Fexercise-random-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbreatheco-de%2Fexercise-random-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbreatheco-de%2Fexercise-random-card/lists"}