Prueba técnica de Angular Developer

How is the initial Angular application structured?

The initial Angular application provided in this project is simple but effective, with a base design that allows to fulfill several functionalities. You can see a home page that acts as the starting point. CSS styles are defined in the styles file and it is recommended not to modify them, as they could affect integration tests later on.

The whole application is contained in a single page, including sections such as the header and tasks in different states (completed, in normal view and in edit mode). It is suggested to split the application into smaller components to separate responsibilities, such as creating individual components for the footer or header.

What functionalities must the application comply with?

The application must fulfill a series of specific functionalities, totaling nine in all:

1. Hide Main and Footer sections without tasks: These sections must be hidden when there are no tasks.

2. Create new task:

   • The input should have autofocus when starting the application.
   • Allow task creation by pressing Enter.
   • Unnecessary spaces at the beginning and end of a task should be removed.

3. Interactions with tasks:

   • When checking a checkbox, the task status should be updated to completed or pending.
   • Enter and exit edit mode using keyboard and events such as double-click.
   • Validate task deletion and editing.

4. Pending task counter:

   • Display the number of uncompleted tasks.
   • Correctly handle pluralization depending on the number (e.g. "0 items", "1 item", "2 items").

5. Clear completed tasks button:

   • Delete exclusively tasks that are marked as completed.

6. Data persistence:

   • Save tasks in localStorage with the specific key mydate/angular.

7. Filters and routes:

   • Implement routes such as /pending or /complete to show the corresponding tasks according to their status.

What added value can I implement?

An added value you can consider would be to deploy the application on platforms such as GitHub Pages, Netlify, Vercel or Fiber Hosting. This is not a must, but it would be a practical bonus that will showcase your skills in handling web application deployment.

Each functionality is designed to boost your knowledge in Angular and its ability to handle effective state and interactions. Below are the steps to complete each expected outcome.

How to handle application persistence?

Persistence is critical to ensure that the tasks entered remain in the system even after reloading the page. Using JavaScript's localStorage is the recommended way to store data locally in the browser. It is crucial to respect the mydate/angular key, as the automated tests will specifically look for data stored under that reference.

What is required to pass the tests?

The above features will be evaluated through automated testing. Take care to carefully develop the details of each requirement to ensure uniform compliance and that your solution meets all expected test cases.

For any queries or doubts during development, it is recommended to use the commenting system and read the associated documentation carefully. Keep going, your Angular skills are about to improve significantly!