Prueba técnica de Angular Developer

¿Cómo está estructurada la aplicación inicial en Angular?

La aplicación inicial en Angular proporcionada en este proyecto es simple pero efectiva, con un diseño base que permite cumplir con diversas funcionalidades. Puedes observar una página inicial que actúa como el punto de partida. Los estilos CSS están definidos en el archivo styles y es recomendable no modificarlos, ya que podrían afectar pruebas de integración más adelante.

La totalidad de la aplicación está contenida en una sola página, incluyendo secciones como el header y las tareas en diferentes estados (completada, en vista normal y en modo edición). Se sugiere dividir la aplicación en componentes más pequeños para separar responsabilidades, como crear componentes individuales para el footer o el header.

¿Qué funcionalidades debe cumplir la aplicación?

La aplicación debe cumplir con una serie de funcionalidades específicas, totalizando nueve en total:

1. Ocultar secciones de Main y Footer sin tareas: Estas secciones deben quedar ocultas cuando no existan tareas.

2. Crear nueva tarea:

   • El input debe tener autofocus al iniciar la aplicación.
   • Permitir la creación de tareas presionando Enter.
   • Deben eliminarse espacios innecesarios al inicio y al final de una tarea.

3. Interacciones con tareas:

   • Al marcar un checkbox, el estado de la tarea debe actualizarse a completada o pendiente.
   • Entrar y salir del modo de edición usando teclado y eventos como doble clic.
   • Validar la eliminación y edición de tareas.

4. Contador de tareas pendientes:

   • Mostrar el número de tareas no completadas.
   • Manejar correctamente la pluralización dependiendo del número (ej: "0 items", "1 item", "2 items").

5. Botón de limpiar tareas completadas:

   • Elimina exclusivamente tareas que estén marcadas como completadas.

6. Persistencia de datos:

   • Guardar tareas en localStorage con la clave específica mydate/angular.

7. Filtros y rutas:

   • Implementar rutas como /pending o /complete para mostrar las tareas correspondientes según su estado.

¿Qué valor añadido puedo implementar?

Un valor añadido que puedes considerar sería el despliegue de la aplicación en plataformas como GitHub Pages, Netlify, Vercel o Fiber Hosting. Esto no es imprescindible, pero sería un bonus práctico que mostrará tus habilidades en el manejo de despliegue de aplicaciones web.

Cada funcionalidad está diseñada para impulsar tus conocimientos en Angular y su capacidad de manejo de estados e interacciones eficaces. A continuación se detallan los pasos para completar cada resultado esperado.

¿Cómo manejar la persistencia de la aplicación?

La persistencia es fundamental para asegurar que las tareas ingresadas se mantengan en el sistema incluso después de recargar la página. Utilizar el localStorage de JavaScript es la forma recomendada para guardar datos localmente en el navegador. Es crucial respetar la clave mydate/angular, ya que las pruebas automatizadas buscarán específicamente los datos guardados bajo esa referencia.

¿Qué se requiere para pasar las pruebas?

Las características mencionadas serán evaluadas a través de pruebas automatizadas. Procura desarrollar con atención los detalles de cada requerimiento para asegurar el cumplimiento uniforme y que tu solución cumpla todos los casos de prueba previstos.

Para cualquier consulta o duda durante el desarrollo, se recomienda utilizar el sistema de comentarios y leer con detenimiento la documentación asociada. ¡Sigue adelante, tus habilidades en Angular están a punto de mejorar significativamente!