Increo .NET Developer Test

Implementation of a simple To-Do application, using HTML5 on the frontend, C# and .NET on the backend. The application allows you to add, view, mark as done, and delete tasks.

Functionality

The application displays a list of tasks to be performed. Tasks are divided into done and to be done. Tasks done are crossed out and are marked in color #9eb2c0 and the checkbox on the left is checked. Tasks to be done are marked with color #2e3641 and the checkbox on the left is unchecked.

A field with the function of adding a new task is always displayed under the last task in the list. The new task added through there is always to be done. When adding a task from that field, the new task will appear at the bottom of the list, but above the add-new-task field. To add the new task from the field at the bottom, it should react to clicking the + icon on the left, or pressing the ENTER key. Either way, the focus should return to the title field and the field emptied after the new task is created and added to the list. You cannot add a task without adding a title. Validation should be on both the frontend and backend sides.

Each task can be marked as completed by checking the checkbox for it.

Each task can be deleted by clicking the trash icon, but should display a message box to the user asking: Are you sure?

Frontend

Application design:

• In the assets folder you will find the PSD Photoshop file with the application design. You can use Photopea to work with PSD files online. The implementation of the design doesn't have to be pixel perfect, but it should resemble the design as close as you can get it.
• The application should be written as a Single Page Application, using only one HTML file, one CSS file, and one JavaScript file.
• Communication between frontend and backend should work in the background, without reloading the page, preferably using AJAX.
• Application style should be built using a CSS Preprocessor, like SCSS or LESS.
• Application logic should be divided with Model-View-Controller or Model-View-Whatever architecture.
• Please do not use any JS libraries, or use them with minimal amount. We prefer Vanilla JS. If you do need to use JS libraries, please state why you use it and what part.
• Use a sans-serif font, like Open Sans, from Google Fonts.

Backend

• API should be written according to the REST specification, using .NET's WebApi.
• All queries and responses are sent in JSON format.
• If there is no error, the response should be 200 Ok or 201 Created accordingly. If there is an error, it should return 400 Bad Request with an array of error messages, preferably in multiple languages (at least Norwegian and English).
• Separate the Controller code and the DataStorage code.
• There will be no user service or authentication, each person has access to create, read, delete, or updating tasks.
• How you store the data is up to you, but it needs to be separated from the controller code.
• [OPTIONAL] Implement some sort of storage cache for the data layer, it can be in-memory for ease. You need to make sure the cache is invalidated and updated when the user adds a new task.

Misc

• The code should be readable and described by comments. JavaScript according to documentationjs, .NET according to Microsoft Docs, and other languages according to the selected specification.
• We leave the application in the development version, we do not minify the files, we do not compress them, we do not combine them, etc.
• Please attach instructions on how to run the application(s).

Good luck

Copyrights

Graphic design is a rewritten version of To Do List by Marijan Petrovski.

This .NET developer test is distributed under the MIT license.