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

Bubble Sorting Cards

Meta

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

Dificultad

intermediate

Repositorio

Clic para abrir

Video

No disponible

Demo en vivo

No disponible

Duración promedio

8 hrs

Tecnologías

La clasificación se considera un concepto importante en muchos lenguajes de programación, ya que nos ayuda a ubicar elementos de una manera más rápida y sencilla.

El algoritmo de clasificación de burbujas es uno de los más fáciles de aprender y ese es el primero que se enseña normalmente. Aquí hay una explicación de 5 minutos sobre cómo funciona el algoritmo de burbuja: https://www.youtube.com/watch?v=xli_FI7CuzA

🌱 Cómo iniciar este proyecto

No clones este repositorio. El primer paso para comenzar a codificar es clonar el vanillajs boilerplate en tu compjutador local o con Gitpod.

a) Si usas Gitpod (recomendada) puedes clonar el boilerplate clic aquí.

b) Si trabajas localmente, escribe el siguiente comando en tu terminal:

1git clone git clone https://github.com/4GeeksAcademy/vanillajs-hello

💡 Important: Remember to create a new repository, update the remote (git remote set-url origin <your new url>), and upload the code to your new repository using add, commit and push.

Instrucciones

  1. Crea una función que genere una lista de cartas al azar.
  2. Permita que el usuario especifique cuántas tarjetas aleatorias debe generar el sitio web utilizando una entrada de texto.
  3. Agregue un botón de "sorteo" que, al hacer clic, hace que esas tarjetas en el sitio web sean hermosas.
  4. Agregue un botón de "clasificación" que ordene las tarjetas usando el algoritmo de clasificación bubble.
  5. Guarde todos los cambios difíciles de realizar al ordenar la lista de tarjetas en una nueva matriz.
  6. Muestra el registro completo de cambios uno encima del otro.

Esta es una animación de cómo debería verse su aplicación:

Bubble Sorting Cards on a website

Pista:

  1. La estrategia primero, nadie comienza a codificar la solución antes de tener una estrategia clara.
  2. Apégate a tu estrategia, olvídate del stackoverflow para la estrategia.
  3. Divide y conquista, intenta separar el ejercicio en ejercicios más pequeños, por ejemplo:
    • Cree el CSS y HTML codificados antes de intentar que sea dinámico, eso le dará una idea clara de qué código HTML necesita construir con su algoritmo.
    • Primero genere una matriz de tarjetas aleatorias, asegúrese de que se está generando correctamente (utilizando la consola.log) antes de intentar procesarla en el sitio web.
    • Cree una función solo para crear el HTML de UNA tarjeta y luego reutilícela para renderizar todo.

Meta

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

Dificultad

intermediate

Repositorio

Clic para abrir

Video

No disponible

Demo en vivo

No disponible

Duración promedio

8 hrs