ToDo

Ссылка на проект

Описание

Проект для управления списком задач.

bandicam.2024-07-17.21-01-01-652.mp4

Функционал

Приложение позволяет пользователю:

• добавлять новые задачи,
• удалять конкретную задачу или все выполненные задачи,
• редактировать текст задачи,
• отмечать задачи как выполненные.

Также есть возможность:

• фильтрации задач "по всем задачам", "активным" и "выполненным".
• добавлен функционал уведомлений об успешном добавлении, удалении, редактировании задач,
• добавлен функционал уведомлений об ошибках: пустая задача не может быть отправлена или при редактировании пустое поле не может быть отправлено,
• синхронизации состояния задач с local storage (чтобы после перезагрузки страницы данные не пропадали),
• добавлен функционал мультиязычности, есть возможность переключать языки с английского на русский.

Используемые технологии

• Vite для сборки проекта.
• Vue.js для интерфейса и логики приложения.
• Vue Router для навигации.
• Vue Composition API для управления состоянием компонентов.
• Vue Toastification для уведомлений.
• VueUse Core для работы с локальным хранилищем.
• UUID для генерирования нового уникального идентификатора для задачи.
• I18N для поддержки мультиязычности.
• ESLint и Prettier для статического анализа кода и форматирования.
• Less для упрощения написания CSS.

Навыки

В процессе реализации проекта Todo на Vue3 я освоила:

1. Маршрутизация: Я успешно применила маршрутизацию в моем приложении с помощью Vue Router, что при расширении проекта позволит пользователям легко перемещаться между различными страницами.

2. Использование Vue 3 Composition API: Я активно использовала Composition API для определения состояния компонентов и логики, что значительно улучшило структуру моего кода.

3. Работа с компонентами Vue: Я создала несколько компонентов, таких как ButtonResult, DisplayInput, TaskItem и научилась передавать данные между ними.

4. Межкомпонентное взаимодействие: Я освоила передачу событий и значений от родительских компонентов к дочерним через (props) и (emits).

5. Управление состоянием: Я научилась управлять состоянием моего приложения с помощью реактивных переменных (ref) и вычисляемых свойств (competed).

6. Обработка событий: Я реализовала обработчики событий для добавления, удаления и редактирования задач и тд.

7. Визуализация данных: С помощью вычисляемых свойств я смогла отобразить отфильтрованные задачи и управлять доступностью кнопок.

8. Работа с локальным хранилищем: Я успешно использовала VueUse Core для работы с локальным хранилищем, где хранила задачи, настройки отображения и языковой выбор, обеспечивая сохранение данных пользователя между сеансами.

9. Мультиязычность: Я реализовала поддержку мультиязычности с помощью I18N, что позволяет пользователям переключаться между различными языками и использовать приложение на предпочитаемом им языке.

10. Уведомления: Я использовала Vue Toastification для вывода уведомлений о действиях пользователя, что значительно улучшило взаимодействие с пользователем.

11. Фильтрация задач: Я реализовала функционал фильтрации задачи по статусу (все, активные, завершенные).

12. UUID: В процессе работы над проектом я успешно использовала UUID для генерации уникальных идентификаторов задач, обеспечивая уникальность каждой задачи в системе.

13. ESLint и Prettier: Я активно использовала ESLint и Prettier для поддержания чистоты и единообразия кода в проекте, что помогло избежать потенциальных ошибок.

Установка и запуск

1. Склонируйте репозиторий на свой компьютер: git clone https://github.com/AntoninaPavlova/Vue3-ToDo.git
2. Установите зависимости: npm install
3. Запустите проект: npm run dev