36. HTML, CSS, JavaScript - TODO app advanced. Продвинутое TODO приложение (список задач)
🟢 Пишем полноценное приложение Advanced TODO (список дел) в котором реализуем много логики, а именно логика для элементов: добавление, удаление, фильтрация/поиск, хранение в браузерном хранилище, изменение состояния готово/не готово. Также напишем несколько функций утилит, которые венесем в отдельный файл-модуль. Для динамической разметки будем применять подход с элементов template. Используем интересные псевдоклассы в CSS, которые заменять часть логики в JavaScript. ➡️ таймлайн ➡️ 00:00 старт 00:41 обзор приложения 03:07 начальная разметка и стилизация 07:10 логика приложения 12:06 файл utils - функции для local storage 14:50 ошибка и фикс ошибки 16:55 template элемент - динамический контент 25:35 стилизация todo элементов 28:15 события кнопки и чекбокса 32:28 отрисовка no todos сообщения 33:33 функция для отрисовки даты создания 36:13 разметка для поискового инпута 38:09 логика фильтрации 49:41 финиш ▶ ПОДДЕРЖАТЬ можно тут - Boosty: ▶ Telegram: ▶ GitHub: ▶ Linkedin: / kolotilshikov ▶ Графический дизайн и анимация: 📎 PDF ФАЙЛ с кодом к каждому уроке в телеграм канале 📎 ⚡️ вкусняхи ⚡️ 🔑 Курс по GIT (одно видео): • Полный КУРС 2024 по GIT. Команды, тер... 🔑 CSS Flexbox (2 видео): • 47. Frontender[1.0] FLEXBOX (флексбок... 🔑 CSS Grid (2 видео): • 78. Frontender[1.0] CSS GRID | Теория... 🔑 Препроцессоры SCSS (2 видео): • 82. Frontender[1.0] ПРЕПРОЦЕССОРЫ SAS... 🔑 SVG, svg-спрайты (2 видео): • 53. Frontender[1.0] Векторная графика... 🔑 1 уровень - Верстка макета (8 видео): • 57. Frontender[1.0] Верстка первого м... 🔑 2 уровень - Верстка макета (8 видео): • 70. Frontender[1.0] ВЕРСТКА второго м... 🔑 3 уровень - Верстка макета (10 видео): • 84. Frontender[1.0] ВЕРСТКА Макета. О... ⚙️ Курс Frontender[1.0] разделен на 3 модуля: 1) HTML, CSS, SCSS, БЭМ, Flexbox, Grid, Bootstrap, GIT, FIGMA, верстка 3 макетов (100 уроков); 2) JavaScript, решение задач, написание нескольких приложений; 3) React, Typescript, Redux написание полноценного приложения; Frontender[1.0] HTML, CSS, JavaScript - TODO app advanced. Продвинутое TODO приложение (список задач) 📢 Автор: Дмитрий Колотильщиков #js #frontend #javascript
