npm install
npm run serve
npm run build
npm run lint
Use Vue.js to implement a small SPA note-taking application.
Each note has a title and a todo list of Todo items. Each Todo item consists of a checkbox and associated text of todo task.
The application consists of only 2 pages.
The main page displays a list of all notes. For each note, a title and todos are displayed, without the ability to edit them.
-
go to create a new note
-
go to edit existed note
-
delete note (confirmation required) The note edit page allows you to edit a specific note, mark Todo items, and then save the changes. Actions with a note:
-
save changes
-
undo editing (confirmation required)
-
delete (confirmation required)
-
undo the change made
-
redo undo
- to add
- delete
- edit text
- mark as done
- All actions on the site should take place without reloading the page.
- Confirmation of actions (delete a note) is performed using a dialog box.
- The interface must meet the usability requirements.
- After reloading the page, the state of the note list should be preserved.
- You can neglect text editing inconsistencies with undo/redo buttons and similar actions with keyboard shortcuts (Ctrl + Z, Command + Z, etc.).
- Dialog boxes should be implemented without using "alert", "prompt" and "confirm".
- JavaScript or TypeScript can be used as the development language.
- Use Webpack as a bundler if needed.
- Layout should be done without using UI libraries (for example Vuetify). Responsiveness is optional, but encouraged.
- The application logic should be broken down into a reasonable number of self-contained Vue components.
- The code should be written clearly and accurately, with the observance of tabulation and other writing elements, without unnecessary elements and functions that are not related to the functionality of the test task, provided with understandable comments.
- Readability and basic architecture.
- Cleanliness and cleanliness of the code is an equally important factor. The code should be written in a uniform style (preferably in the one recommended for a particular language). Also, cleanliness includes the absence of copy-paste and duplication of logic.
The test task should be provided in the following form:
- Link to public repository (GitHub, BitBucket, GitLab) with source code.
- Link to the site for testing the functionality. Or Dockerfile and docker-compose.yaml, which allow you to deploy locally using docker-compose up a working copy of your site.