4Geeks logo
Sobre Nosotros

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Data Science and Machine Learning - 16 wks

Full-Stack Software Developer - 16w

Buscar en lecciones

Aprendizaje social y en vivo

La forma más eficiente de aprender: Únete a una cohorte con compañeros, transmisiones en vivo, sesiones improvisadas de codificación, tutorías en vivo con expertos reales y mantenga la motivación.

← Volver a Proyectos

Explota globos usando HTML/CSS y Javascript

Meta

Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación

Dificultad

easy

Repositorio

Clic para abrir

Video

Clic para abrir

Demo en vivo

No disponible

Duración promedio

8 hrs

Tecnologías

Pop Balloons game using Javascript, HTML/CSS 🎈🎊

Este es un buen juego para practicar HTML, CSS y un poco de Javascript. El objetivo de este juego es reventar todos los globos haciendo clic en ellos.

🌱 Cómo iniciar este proyecto

Este proyecto viene con los archivos necesarios para empezar a trabajar, pero tienes dos opciones para empezar:

a) Abrir este enlace con Gitpod en tu navegador: https://gitpod.io#https://github.com/breatheco-de/exercise-pop-baloons-javascript.git

b) Clonar este repositorio localmente en tu computador:

1$ git clone https://github.com/breatheco-de/exercise-pop-baloons-javascript.git

Ejecuta el sitio web con el siguiente comando en tu terminal: $ npx http-server --yes -c-1

💡 Importante: Recuerda actualizar el remote del proyecto con el de tu repositorio usando git remote set-url origin <your new url>, y luego guardar tu código en tu nuevo repositorio usando add, commit y push.

📝 Instrucciones

Balloon Pop Game with HTML/CSS and Javascript

Crea un juego con el siguiente flujo de trabajo:

  1. Cuando el sitio web cargue (window.onload) tienes que mostrar (render) todos los globos.
  2. Cada globo debe tener un onClick para poder escuchar cuando el usuario hace clic en él
  3. Cuando el usuario hace clic en el globo, éste desaparece de la pantalla
  4. Cuando los 20 globos hayan desaparecido el sitio web se recarga y el juego comienza otra vez.

💪 Estrategia

Strategy to complete the pop balloons

  1. Primero, declara un array o arreglo de 20 colores, cada color representará un globo, los colores se pueden repetir.
  2. Para reventar un globo, tendrás que convertir el valor de esa posición del globo sea igual a null.
  3. Haz un loop o bucle con todos los colores y crea el string html para cada globo, debes generar un string html como este y añadirlo al DOM:
<div class="balloon active"></div>
<div class="balloon popped"></div>
<div class="balloon active"></div>
<div class="balloon active"></div>
  1. Agrega el string al innterHTML del elemento <div id =" balloon-map "> usando document.querySelector.

  2. Actualiza tu función que muestra (render) los globos para agregar también un onClick en cada div de globo para escuchar el clic.

  3. Cuando haces clic en un globo, anda al array y cambia el valor del color a null.

Meta

Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación

Dificultad

easy

Repositorio

Clic para abrir

Demo en vivo

No disponible

Duración promedio

8 hrs