Treehouse Code Adventures > Componente de Clasificación de Datos

Componente de Clasificación de Datos

Dar a los usuarios finales múltiples formas de clasificar/ver sus datos es una excelente característica de UX. Esto puede hacerse relativamente fácilmente pensando con anticipación y escribiendo buen CSS. Por supuesto, también JavaScript mínimo.

Crea un componente que permita a los usuarios ver exactamente los mismos datos de al menos 2 formas. Según los mockups; vista de tarjeta y vista de lista.

¡Usa JavaScript vanilla o cualquier framework que desees para abordar esta Aventura de Código!

Comienza la Aventura

Creado: 26/04/2024 por Dustin Usey

Nivel de habilidad: intermedio

Temas utilizados:

Tiempo estimado de finalización: 2 horas

Crea un componente que permita a los usuarios ver exactamente los mismos datos de al menos 2 formas. Según los mockups; vista de tarjeta y vista de lista.

¡Usa JavaScript vanilla o cualquier framework que desees para abordar esta Aventura de Código!

Métodos de arreglos en JavaScript: filter()

¿Alguna vez has necesitado filtrar elementos de un arreglo según ciertos criterios? Por ejemplo, ¿para obtener números dentro de un rango, o cadenas que contengan ciertos caracteres? Afortunadamente, hay una manera fácil de hacer esto en JavaScript usando el método filter(). Acompáñanos mientras Dustin te muestra cómo usar este método y qué puede hacer. Luego, ofrece un desafío (y una solución) para que puedas practicar usándolo de inmediato.

Búsqueda de JavaScript

Permitir que los usuarios busquen datos en tu aplicación o sitio web es una excelente característica de UX. Construir este tipo de funcionalidad no es tan difícil como podrías pensar. Con algo de JavaScript básico, podemos abordar el filtrado y la búsqueda de datos. Acompáñame mientras agrego una función de búsqueda con JavaScript vanilla que permite al usuario buscar un autor específico en una lista de autores.

Transiciones y Transformaciones CSS

Con transiciones y transformaciones de CSS, puedes crear animaciones simples que mejoren las interacciones del usuario en sitios web y aplicaciones.

0
Para comenzar, haz clic en Comienza la Aventura en la parte superior de la página y luego descarga tus archivos de inicio.
1
Crea la interfaz lo más cerca posible a los mockups.
2
Asegúrate de configurar una "vista predeterminada" con el icono correspondiente que tenga un estado activo.
3
Al hacer clic en una vista diferente, los estados activos deben actualizarse en consecuencia.
4
Los datos deben clasificarse según el icono activo.
5
Desafío Extra: Cada elemento (tarjeta, lista, etc.) debe tener una animación.