[PROJ-18.17/compl] refactoring-dry-readme

Filling README.md file.

FS-dev: B-3 / JS basic

Author: matowdev

full-stack-dev/3-js-basic/18-proj-habit-tracker/18-17-refactoring-dry-readme/README.md

@@ -0,0 +1,109 @@
+# Трекер привычек (Habbit tracker)
+
+### Описание проекта
+
+Данный проект представляет собой интерактивное одностраничное приложение (SPA) "Трекер привычек". Он создан как финальный проект для курса по основам JavaScript. Приложение позволяет пользователям создавать, отслеживать и удалять свои привычки, отмечая ежедневный прогресс.
+
+Проект полностью построен на "чистом" **JavaScript (Vanilla JS)**, который управляет всем состоянием, рендерингом и взаимодействием с пользователем. Данные хранятся локально в **LocalStorage**, что обеспечивает их сохранность между сессиями.
+
+[🔗 Демо-версия на GitHub Pages](https://matowdev.github.io/purple-school/full-stack-dev/3-js-basic/18-proj-habit-tracker/18-17-refactoring-dry-readme)
+
+---
+
+### Функциональность
+
+- **Создание и удаление привычек**: Пользователи могут добавлять новые привычки через модальное окно (pop-up), указывая название, цель (в днях) и выбирая иконку.
+- **Отслеживание прогресса**: Для каждой привычки можно ежедневно добавлять комментарий, который фиксирует "выполненный день".
+- **Удаление дней**: Реализована возможность удалять отдельные дни из прогресса привычки.
+- **Динамический интерфейс (UI)**: Приложение полностью динамическое. Выбор привычки в боковой панели, добавление/удаление дней или целых привычек немедленно обновляет основной контент (заголовок, прогресс-бар, список дней) без перезагрузки страницы.
+- **Хранение данных (Persistence)**: Все данные о привычках и их прогрессе сохраняются в `localStorage` браузера.
+- **Навигация по URL**: Активная привычка запоминается в URL с помощью хеша (`#`), что позволяет делиться ссылкой на конкретную привычку и восстанавливать состояние при перезагрузке страницы.
+- **Валидация форм**: Формы добавления привычки и добавления дня имеют базовую валидацию на заполненность полей.
+
+---
+
+### Внешний вид страницы
+
+![Habbit Tracker](https://github.com/matowdev/purple-school/blob/main/full-stack-dev/3-js-basic/18-proj-habit-tracker/18-17-refactoring-dry-readme/images/final-app-view.png?raw=true)
+
+---
+
+### Используемые технологии
+
+- **HTML5**: Для создания семантической структуры SPA ( `<aside>`, `<main>`, `<header>` и т.д.).
+- **CSS3**: Для стилизации всех элементов. Ключевые особенности использования:
+  - **CSS Custom Properties (переменные)** для централизованного управления палитрой, шрифтами и размерами (`variables.css`).
+  - **Flexbox** для построения адаптивной сетки и выравнивания.
+  - **Модульная структура**: Стили разделены на файлы по компонентам (`sidebar.css`, `content.css`, `pop-up.css` и т.д.).
+- **JavaScript (ES6+ / Vanilla JS)**: Ядро всего приложения. JavaScript отвечает за:
+  - **Управление состоянием (State Management)**: Хранение и изменение основного массива данных `habbits`.
+  - **DOM Manipulation**: Полный рендеринг и обновление DOM-дерева (`createElement`, `innerHTML`, `append`).
+  - **Обработка событий (Event Handling)**: Использование `onclick`, `onsubmit` и `addEventListener` для всей интерактивности.
+  - **Работа с LocalStorage**: Сохранение (`saveData`) и загрузка (`loadData`) состояния приложения.
+
+---
+
+### Структура кода
+
+#### Основные принципы кода:
+
+- **State-Driven UI**: Весь интерфейс перерисовывается функцией `rerender()` (и её хелперами `rerenderMenu`, `rerenderHeaderContentEl` и т.д.), которая опирается на текущее состояние глобального массива `habbits`.
+- **Модульность JS**: Код в `index.js` логически разделен на блоки:
+  - `// ** utility **` (вспомогательные функции, н-р, `loadData`, `saveData`).
+  - `// ** render **` (функции, отвечающие за отрисовку UI).
+  - `// ** business **` (основная логика приложения: `addCommentDay`, `deleteHabbit` и т.д.).
+  - `// init` (инициализация приложения при загрузке).
+- **Кэширование DOM-элементов**: Ключевые узлы DOM, которые часто используются, один раз находятся и сохраняются в объекте `app` для быстрого доступа.
+- **Именование по БЭМ**: Для CSS-классов используется строгая БЭМ-методология (Блок, Элемент, Модификатор). Это делает компоненты независимыми, легко переиспользуемыми и значительно повышает читаемость кода.
+- **Модульность CSS**: Стили импортируются в один главный файл `style.css` через директиву `@import`.
+
+#### Основные файлы и папки:
+
+```
+habbit-tracker/
+│── css/                  # Стили:
+│   ├── variables.css     # CSS переменные (цвета, шрифты)
+│   ├── page.css          # Глобальные стили страницы
+│   ├── app.css           # Стили основного layout
+│   ├── sidebar.css       # Стили боковой панели
+│   ├── content.css       # Стили контентной части
+│   ├── progress-bar.css  # Стили прогресс-бара
+│   ├── habbit-days.css   # Стили списка дней
+│   ├── pop-up.css        # Стили модального окна
+│   └── style.css         # Главный импортирующий файл
+│
+│── images/               # Иконки, логотипы и favicon
+│
+│── js/
+│   └── index.js          # Весь JavaScript код приложения
+│
+│── index.html            # HTML-структура приложения
+└── README.md             # Это описание проекта
+```
+
+---
+
+### На что обратить внимание?
+
+1.  **Чистый JavaScript**: Проект демонстрирует, как создать полноценное SPA (Single Page Application) без использования каких-либо фреймворков (React, Vue и т.д.).
+2.  **Управление состоянием**: Вся логика построена вокруг манипуляций с массивом `habbits`. Функции `map` и `filter` активно используются для не-мутирующего обновления состояния (хотя в `deleteCommentDay` используется `splice` для мутации).
+3.  **Динамический рендеринг**: Вместо того чтобы скрывать/показывать элементы, приложение _перерисовывает_ контентные блоки (`rerenderMenu`, `rerenderHabbitDaysContentEl`) на основе актуальных данных.
+4.  **Работа с LocalStorage**: Проект показывает простой, но надежный способ сохранения данных пользователя между сеансами.
+5.  **Инициализация (IIFE)**: При загрузке страницы немедленно-вызываемая функция (`IIFE`) в `index.js` (`(() => { ... })();`) определяет, что нужно показать пользователю: "пустое состояние", привычку из `localStorage` или привычку из URL-хеша.
+
+---
+
+### Запуск проекта
+
+Поскольку это статический сайт, для его запуска не требуется сервер.
+
+```sh
+# Просто откройте файл index.html в вашем браузере
+open index.html
+```
+
+---
+
+### Заключение
+
+Этот проект является отличным примером "клиентского" приложения, написанного на чистом JavaScript. Он охватывает фундаментальные концепции front-end разработки: управление состоянием, манипуляция DOM, обработка событий и сохранение данных в браузере.