4Geeks logo
4Geeks logo

Courses

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

Coding Bootcamp

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Próximos eventos en vivo

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.

Full-Stack Software Developer - 16w

Data Science and Machine Learning - 16 wks

Buscar en lecciones


IngresarEmpezar
← 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

Video de solución

Clic para abrir

Duración promedio

8 hrs

Tecnologías

Weekly Coding Challenge

Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!

Únete al reto

Podcast: Code Sets You Free

Un podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.

Escuchar el podcast

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

Video de solución

Clic para abrir

Duración promedio

8 hrs

Weekly Coding Challenge

Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!

Únete al reto

Podcast: Code Sets You Free

Un podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.

Escuchar el podcast