Skip to content

Commit 842e9ab

Browse files
committed
[PW-8.6/ret] Add README.md file
Adding functional, structural description for this proj (what/how). Worth noting: - that this is a realization of the "TO-DO app". core: B-3 / JS-BL
1 parent 02dcbe6 commit 842e9ab

File tree

1 file changed

+85
-0
lines changed
  • core-courses/3-js-basic-level/8-intro-to-DOM-2/8-6-pw-8-intro-to-DOM-2

1 file changed

+85
-0
lines changed
Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
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

Comments
 (0)