Galería de imágenes con navegación y rutas

Proyecto
Intermedio
Vuejs
Vuejs
60 min
500 XP
Actualizado: 19/10/2024

¡Practica y certifícate!

Retroalimentación
Soluciones
Certificado
Comenzar

Descripción

Desarrolla una galería de imágenes en Vue.js con navegación entre categorías y rutas dinámicas. Implementa Vue Router y utiliza TypeScript para crear una aplicación interactiva y responsive que muestra detalles de cada imagen.

  1. Inicializa el proyecto:
    • Utiliza Vue CLI o Vite para crear un nuevo proyecto de Vue.js con soporte para TypeScript.
    • Configura el entorno de desarrollo en Visual Studio Code.
  2. Configura Vue Router:
    • Instala y configura Vue Router en tu proyecto.
    • Define las rutas necesarias para la página principal, vista de categoría y vista de detalle de imagen.
  3. Crea el conjunto de datos:
    • Prepara un conjunto de datos que contenga las categorías y las imágenes asociadas.
    • Puedes utilizar un archivo JSON o definir los datos directamente en el código.
  4. Desarrolla los componentes:
    • Componente de categorías: muestra las categorías disponibles y permite navegar a la vista de imágenes por categoría.
    • Componente de lista de imágenes: muestra las imágenes de la categoría seleccionada.
    • Componente de detalle de imagen: muestra la imagen seleccionada en detalle junto con su descripción.
  5. Implementa la navegación y las rutas dinámicas:
    • Configura las rutas con parámetros dinámicos para las categorías e imágenes.
    • Asegúrate de pasar y recibir los parámetros correctamente en los componentes.
  6. Aplica estilos con CSS:
    • Diseña la interfaz de usuario para que sea atractiva y responsive.
    • Utiliza Flexbox o Grid para organizar los elementos en la página.
  7. Prueba la aplicación:
    • Verifica que la navegación funcione correctamente.
    • Asegúrate de que los datos se carguen de forma reactiva y que los componentes muestren la información adecuada.
  8. Optimiza y documenta el código:
    • Revisa tu código para garantizar que siga las buenas prácticas de TypeScript y Vue.js.
    • Comenta las partes clave del código para facilitar su comprensión.

Solución al ejercicio

Contenido bloqueado

¡Desbloquea la solución completa!

Completa el examen para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.

solution.js
JavaScript
1 function solveChallenge ( input ) {
2 // Algoritmo optimizado O(n log n)
3 const data = parseInput ( input );
4 const sorted = data . sort (( a , b ) => a - b );
5
6 // Aplicar técnica de dos punteros
7 let left = 0 , right = sorted . length - 1 ;
8 const result = [];
9
10 while ( left < right ) {
11 const sum = sorted [ left ] + sorted [ right ];
12 if ( sum === target ) {
13 result . push ([ sorted [ left ], sorted [ right ]]);
14 left ++; right --;
15 } else if ( sum < target ) {
16 left ++;
17 } else {
18 right --;
19 }
20 }
21
22 return result ;
23 }
Código completo
Explicaciones
Mejores prácticas
+1.200 developers han resuelto este ejercicio de programación

Practica con exámenes de Vuejs

Mejora tus habilidades con cientos de exámenes de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.

Retroalimentación

Aprende de tus errores

Progreso

Mide tu avance

Certificación

Valida tus habilidades

Únete a miles de desarrolladores mejorando sus habilidades

⭐⭐⭐⭐⭐
4.9/5 valoración