|
2 | 2 |
|
3 | 3 | El laboratorio del módulo de Vue, lo hemos divido en dos secciones. |
4 | 4 |
|
5 | | -- **Básico**: Aplicar las técnicas que hemos visto en la parte práctica de Vue a una aplicación, pero dejando espacio |
6 | | - por si queréis centraros en otro framework. |
| 5 | +- **Básico**: Aplicar las técnicas que hemos visto en la parte práctica de Vue a una aplicación, pero dejando espacio por si queréis centraros en otro framework. |
7 | 6 | - **Opcional**: Para experimentar con requrerimientos cercanos a los que os podéis encontrar en el mundo real. |
8 | 7 |
|
9 | 8 | **IMPORTANTE:** estas prácticas las tenéis que subir a vuestro repositorio de Github (o si lo prefirís Gitlab o Bitbucket público). |
10 | 9 |
|
11 | 10 | ## Ejercicio: ToDo App |
12 | 11 |
|
13 | | -En este ejercicio, deberás crear una aplicación web utilizando [Nuxt](https://nuxt.com/) que permita a los usuarios administrar una lista de tareas ("ToDo list"). La interfaz de usuario debe tener los siguientes elementos: |
| 12 | +En este ejercicio, deberás crear una aplicación web utilizando [Nuxt](https://nuxt.com/) que permita a los usuarios administrar una lista de tareas ("ToDo tasks list"). La interfaz de usuario debe tener los siguientes elementos: |
14 | 13 |
|
15 | | -- Un campo de texto donde los usuarios puedan ingresar el nombre de una tarea. |
16 | | -- Un botón "Agregar" que agregue la tarea ingresada a la lista. |
| 14 | +- Un formulario con un campo de texto donde los usuarios puedan ingresar el nombre de una tarea. |
| 15 | +- También debe contener un botón "Agregar" que agregue una tarea a la lista. |
17 | 16 | - Una lista de tareas, donde cada tarea tenga: |
18 | 17 | - un botón para marcar una tarea como completada, que pueda ser activado o desactivado. |
19 | 18 | - un botón "Eliminar" que permita eliminarla de la lista. |
20 | 19 |
|
21 | 20 | La lista de tareas debe ser almacenada en el estado de la aplicación utilizando un store de Pinia. |
22 | 21 |
|
| 22 | +Una vez se aña una tarea, el campo de texto debe limpiarse automáticamente. |
| 23 | + |
23 | 24 | ### Requisitos Adicionales (Opcional): |
24 | 25 |
|
25 | | -- Agrega estilos CSS para mejorar la apariencia de la aplicación. |
26 | | -- Puedes hacer la app _responsive_ y para poder verla bien en dispositivos móviles. |
27 | | -- Añade la persistencia de datos utilizando el mismo plugin de Pinia que utilizamos en el ejercicio del ChatGPT para que no se pierdan tus tareas: https://github.com/prazdevs/pinia-plugin-persistedstate |
28 | | -- Para los botonos de "Agregar" y "Eliminar", puedes utilizar los iconos o emojis, pero intenta que sea lo más accesible posible (usando atributos ARIA o texto "escondido", solo visible para lectores de pantalla). |
29 | | -- Puedes agregar funcionalidades adicionales, como poder editar el contenido de una tarea existente. |
| 26 | +- Agregar estilos CSS para mejorar la apariencia de la aplicación. |
| 27 | +- Hacer la app _responsive_ y para poder verla bien e interactuar con ella en dispositivos móviles. |
| 28 | +- Añadir la persistencia de estado utilizando el mismo plugin de Pinia que utilizamos en el ejercicio del ChatGPT para que no se pierdan las tareas al refrescar o salir y volver a entrar: https://github.com/prazdevs/pinia-plugin-persistedstate |
| 29 | +- Para los botonos de "Agregar" y "Eliminar", se pueden utilizar iconos o emojis, pero intentando que sea lo más accesible posible (usando atributos ARIA o texto "escondido", solo visible para lectores de pantalla en caso de añadir botones que no contengan texto visible y sólo muestren iconos o emojis). |
| 30 | +- Agregar funcionalidades adicionales, como poder editar el contenido de una tarea ya existente y guardar los cambios. |
| 31 | +- Agregar una funcionalidad de filtrado para mostrar solo las tareas completadas, solo las tareas pendientes o todas las tareas. |
| 32 | +- Agregar una funcionalidad de búsqueda para filtrar las tareas por su contenido. |
| 33 | +- Agregar una funcionalidad para reordenar las tareas por su contenido o por su estado (completadas primero o pendientes primero). |
| 34 | +- Agregar una funcionalidad para marcar todas las tareas como completadas o para borrar todas las tareas completadas. |
| 35 | +- Añadir la posibilidad de añadir múltiples listas con un nombre y un menú para navegar entre ellas y que cada una esté separada de las demás por rutas en la aplicación. |
| 36 | + |
| 37 | +Las funcionalidades adicionales son opcionales y no es necesario implementarlas todas. Se pueden añadir algunas de ellas o cualquier otra que se os ocurra. |
30 | 38 |
|
31 | 39 | ¡Buena suerte con el ejercicio! |
0 commit comments