|
| 1 | +# TODO-приложение |
| 2 | + |
| 3 | +### Описание проекта |
| 4 | + |
| 5 | +Данный проект представляет собой веб-приложение "TODO", разработанное для практики работы с DOM, обработчиками событий и LocalStorage. Приложение позволяет пользователям добавлять, удалять и изменять статус задач, а также сохранять данные в локальном хранилище браузера. |
| 6 | + |
| 7 | +[🔗 Демо-версия на GitHub Pages](https://matowdev.github.io/fullstack-js-by-skillbox/core-courses/3-js-basic-level/8-intro-to-DOM-2/8-6-pw-8-intro-to-DOM-2/index.html) |
| 8 | + |
| 9 | +--- |
| 10 | + |
| 11 | +### Функциональность |
| 12 | + |
| 13 | +- **Динамическое создание списка задач** при загрузке страницы. |
| 14 | +- **Разделение на три категории задач** (основные, второстепенные, другие). |
| 15 | +- **Сохранение задач в LocalStorage** для каждого списка. |
| 16 | +- **Добавление задач** с вводом названия. |
| 17 | +- **Изменение статуса задачи** (выполнено/не выполнено). |
| 18 | +- **Удаление задачи** из списка. |
| 19 | + |
| 20 | +--- |
| 21 | + |
| 22 | +### Используемые технологии и библиотеки |
| 23 | + |
| 24 | +#### Front-end: |
| 25 | + |
| 26 | +- **HTML, CSS, JavaScript** – основные технологии проекта. |
| 27 | +- **Bootstrap 4** – стилизация элементов. |
| 28 | +- **LocalStorage API** – хранение данных локально. |
| 29 | +- **Событийная модель JavaScript** – обработка действий пользователя. |
| 30 | + |
| 31 | +--- |
| 32 | + |
| 33 | +### Структура проекта |
| 34 | + |
| 35 | +#### Основные принципы: |
| 36 | + |
| 37 | +- **Чистый и читаемый код** с комментариями. |
| 38 | +- **Разделение логики на модули** для лучшей поддержки. |
| 39 | +- **Использование LocalStorage** для сохранения данных. |
| 40 | + |
| 41 | +**Основные файлы и папки:** |
| 42 | + |
| 43 | +``` |
| 44 | +project-root/ |
| 45 | +│── css/ # Стили проекта |
| 46 | +│── images/ # Изображения и иконки |
| 47 | +│── index.html # Главная страница с основными задачами |
| 48 | +│── second.html # Вторая категория задач |
| 49 | +│── third.html # Третья категория задач |
| 50 | +│── todo-app.js # Основная логика работы приложения |
| 51 | +│── README.md # Описание проекта |
| 52 | +``` |
| 53 | + |
| 54 | +--- |
| 55 | + |
| 56 | +### Основные файлы и их назначение |
| 57 | + |
| 58 | +#### `index.html`, `second.html`, `third.html` |
| 59 | + |
| 60 | +- Основные HTML-страницы с разными категориями задач. |
| 61 | +- Включают навигацию для переключения между списками. |
| 62 | +- Подключают скрипт `todo-app.js` для управления задачами. |
| 63 | + |
| 64 | +#### `todo-app.js` |
| 65 | + |
| 66 | +- Управляет работой списка задач. |
| 67 | +- Обрабатывает события (добавление, удаление, изменение статуса). |
| 68 | +- Хранит данные в LocalStorage. |
| 69 | +- Обрабатывает загрузку данных при инициализации страницы. |
| 70 | + |
| 71 | +--- |
| 72 | + |
| 73 | +### Запуск проекта |
| 74 | + |
| 75 | +#### Открытие локально: |
| 76 | + |
| 77 | +```sh |
| 78 | +open index.html |
| 79 | +``` |
| 80 | + |
| 81 | +--- |
| 82 | + |
| 83 | +### Заключение |
| 84 | + |
| 85 | +Этот проект является учебным примером работы с DOM, событиями и LocalStorage. Он позволяет освоить основные принципы работы с динамическими списками и хранения данных в браузере. |
0 commit comments