A tu propio ritmo

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.

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.

Buscar en lecciones


IngresarEmpezar

Regístrate en 4Geeks

← Volver a Proyectos

Ordenando Cartas con el método Select

Dificultad

  • intermediate

Duración promedio

6 hrs

Tecnologías

  • javascript

  • html-css

  • vanilla-js

Dificultad

  • intermediate

Duración promedio

6 hrs

Tecnologías

  • javascript

  • html-css

  • vanilla-js

alt text Sorting Cards using the selection algorithm

El "algoritmo de selección de selección" es también otro ejemplo simple de cómo funcionan las computadoras al ordenar la lista de cosas. Aquí hay una explicación de 5 minutos sobre cómo funciona el algoritmo de selección: https://www.youtube.com/watch?v=g-PGLbMth_g

🌱 Cómo iniciar este proyecto

No clones este repositorio. El primer paso para comenzar a codificar es clonar el vanillajs boilerplate en tu computador 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 https://github.com/4GeeksAcademy/vanillajs-hello

💡 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

  1. Crea una función que genere una lista de cartas al azar.
  2. Permite que el usuario especifique cuántas cartas 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 cartas en el sitio web sean hermosas.
  4. Agregue un botón de "clasificación" que ordene las tarjetas usando el algoritmo de clasificación selection.
  5. Guarde todos los cambios difíciles de realizar al ordenar la lista de tareas en una nuevo array.
  6. Muestra el registro completo de cambios uno encima del otro.

Así debiera verse tu 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:
    • Crea 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.

Regístrate para obtener acceso a proyectos similares

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Dificultad

  • intermediate

Duración promedio

6 hrs

Tecnologías

  • javascript

  • html-css

  • vanilla-js

Dificultad

  • intermediate

Duración promedio

6 hrs

Tecnologías

  • javascript

  • html-css

  • vanilla-js

Dificultad

  • intermediate

Duración promedio

6 hrs

Tecnologías

  • javascript

  • html-css

  • vanilla-js

Dificultad

  • intermediate

Duración promedio

6 hrs

Tecnologías

  • javascript

  • html-css

  • vanilla-js

Regístrate para obtener acceso a proyectos similares

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Dificultad

  • intermediate

Duración promedio

6 hrs

Tecnologías

  • javascript

  • html-css

  • vanilla-js

Dificultad

  • intermediate

Duración promedio

6 hrs

Tecnologías

  • javascript

  • html-css

  • vanilla-js