Empezar tutorial interactivo
Ordenando Cartas con Selección
El "Algoritmo 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
Recomendamos abrir la plantilla vanillajs boilerplate, utilizando una herramienta de aprovisionamiento como Codespaces (recomendado) o Gitpod. Alternativamente, puedes clonar el repositorio de GitHub en tu computadora local utilizando el comando git clone.
Este es el repositorio que necesitas abrir o clonar:
1git clone https://github.com/4GeeksAcademy/vanillajs-hello
💡 Importante: Recuerda crear un nuevo repositorio, actualizar el remoto (git remote set-url origin <tu nueva url>), y subir el código a tu nuevo repositorio utilizando add, commit y push.
Instrucciones
- Crea una función que genere una lista de cartas al azar.
- Permite que el usuario especifique cuántas cartas aleatorias debe generar el sitio web utilizando una entrada de texto.
- Agregue un botón de "sorteo" que, al hacer clic, hace que esas cartas en el sitio web sean hermosas.
- Agregue un botón de "clasificación" que ordene las tarjetas usando el algoritmo de clasificación
selection. - Guarde todos los cambios difíciles de realizar al ordenar la lista de tareas en una nuevo array.
- Muestra el registro completo de cambios uno encima del otro.
Así debiera verse tu aplicación:
Pista:
- La estrategia primero, nadie comienza a codificar la solución antes de tener una estrategia clara.
- Apégate a tu estrategia, olvídate del stackoverflow para la estrategia.
- 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.