Создание туду листа 0:07 Создание приложения для записи задач, целей и дел на неделю или месяц. Приложение будет доступно на GitHub или хостинге, с возможностью сохранения иконки на рабочий стол.
Функционал приложения 1:37 Динамическое поле ввода текста с проверкой на пустоту и удаление лишних пробелов. Стандартный функционал добавления, удаления и редактирования задач. Защита от дурака: задачи не могут быть добавлены или отредактированы, если они уже выполнены. Динамическая нумерация задач и перемещение между ними. Возможность закрепления задач вверху или внизу списка. Возможность двигать задачи между собой и между закрепленными задачами. Автоматическое перемещение в верхнее меню при редактировании задачи.
Введение 11:11 Автор объясняет, что в телеграм-канале можно скачать архив с кодом для создания приложения, где будет весь стартовый код, стили и разметка. В архиве будет файл с разметкой, где будет форма, поле ввода и кнопки.
Стили и функции 13:09 Автор показывает стили и функции, которые будут использоваться в приложении. В файле index.js будут переменные и комментарии, а также функции для работы с формой и добавления задач.
Работа с формой 16:22 Автор объясняет, как отлавливать события и отключать стандартное поведение формы при отправке. Затем автор проверяет правильность введенных данных и обрабатывает ошибки.
Сохранение данных 19:44 Автор объясняет, как использовать локальное хранилище браузера для сохранения данных. В приложении будут использоваться функции для работы с локальным хранилищем и получения данных из него.
Создание функции гет таск локатор 20:56 Функция получает данные из хранилища браузера и парсит их в массив. Если данных нет, возвращает пустой массив.
Создание функции сет таск локатор 21:50 Функция сохраняет измененные данные в хранилище браузера. Использует функцию гет таск локатор для получения данных и функцию генер рет юник айди для генерации уникального идентификатора.
Использование функций в приложении 23:46 Импортируем функции гет таск локатор, сет таск локатор и генер рет юник айди в индекс gс. В функции сет таск локатор создаем новый объект с данными текущей задачи и сохраняем его обратно в хранилище.
Функция рендер таск 27:58 Функция получает массив с данными из хранилища и отображает их на странице. Функция проверяет, что массив не пустой, и выходит из функции, если это так.
Сортировка и рендеринг задач 30:30 Сортировка задач по выполнению, закреплению и позиции. Использование метода сортировки и функции форыч для обхода массива и рендеринга задач на странице.
Деструктуризация и работа с задачами 32:23 Использование деструктуризации для удобства работы с данными. Рендеринг разметки задачи с использованием стандартных и динамических переменных.
Добавление и удаление задач 35:15 Импорт функции обновления списка задач и добавление ее в функцию отправки сообщения. Рендеринг задач при обновлении страницы с использованием функции обновления списка задач.
Вешание событий на кнопки 38:00 Использование события клика на аутпут для отслеживания всех кликов в диве с задачами. Создание функций для выполнения задач на основе нажатых кнопок.
Функция выполнения задачи 40:33 Получение айдишника задачи из родительского блока с классом таск. Использование функции форыч для удаления задачи из списка.
Удаление задачи 41:51 Функция получает массив из локального хранилища и находит индекс задачи, которую нужно удалить. Если индекс равен -1, то возникает ошибка и функция завершается. Если задача найдена, то проверяется, не закреплена ли она и не выполнена ли. Если задача не закреплена и не выполнена, то она удаляется из массива и сохраняется обратно в локальное хранилище. Функция вызывает функцию обновления страницы для перерендеринга.
Закрепление задачи 46:15 Функция получает индекс задачи и проверяет, не выполнена ли она. Если задача выполнена, то возникает ошибка и функция завершается. Если задача не выполнена, то она закрепляется и сохраняется обратно в локальное хранилище. Функция вызывает функцию обновления страницы для перерендеринга.
Редактирование задачи 50:07 Функция получает индекс задачи, текст задачи и идентификатор задачи. Текст задачи записывается в текстовое поле, кнопка "Добавить" меняется на "Сохранить", а кнопка "Отменить" становится видимой. Функция вызывает функцию обновления страницы для перерендеринга. Функция "Сохранить" сохраняет задачу и вызывает функцию обновления страницы. Функция "Отмена" завершает редактирование и вызывает функцию обновления страницы.
Создание функции для редактирования задач 56:11 Создается функция, которая принимает задачу и редактирует ее. Функция получает массив из локаторж, находит индекс задачи и перезаписывает ее в массив рейлс. Если задача не найдена, функция кидает ошибку.
Очистка данных 57:55 Функция резет сент форм очищает данные, обнуляет переменную эдит и добавляет класс "нонкапсе". Функция вешается на событие "отмена".
Перетаскивание задач 1:01:09 Функция перетаскивания задач объявляется внутри функции рендер таск. Функция находит все задачи, обходит их циклом и вешает события "драг старт" и "драг энд". Функция сейф позишн таск сохраняет текущие позиции задач при перетаскивании. Если элементов больше одного, функция вызывается.
Перетаскивание элементов 1:06:15 В видео объясняется, как реализовать перетаскивание элементов на странице с помощью JavaScript. Создаются функции для обработки событий старта и окончания перетаскивания, а также сохранения позиций элементов.
Определение позиции для вставки элемента 1:08:10 В видео описывается, как определить позицию для вставки перетаскиваемого элемента. Используется метод find для нахождения элементов с определенным классом и их позиционирования.
Тестирование и улучшение кода 1:10:38 В видео демонстрируется, как можно проверить работу перетаскивания элементов. Автор предлагает возможные улучшения кода, такие как добавление ввода по интервалу и изменение дизайна. Также объясняется, как сохранить код на рабочем столе и поделиться им с другими пользователями.
