Скачать или смотреть 45. JavaScript - TODO приложение на классах в ООП стиле

🟢 Пишем TODO приложение с нуля используя HTML, CSS, JavaScript. Приложение на классах в ООП стиле. Здесь мы закрепляем материал с классами в JS, на практике видим наследование и инкапсуляцию. Делаем декомпозицию кода, применяем делегирование событий, используем локальное хранилище и оборачиваем всё это в красивый дизайн.

➡️ таймлайн ➡️
00:00 старт
01:21 обзор приложения
02:56 разметка HTML
04:40 начальные стили CSS
06:45 логика приложения JS
10:00 bindEvents метод для событий
12:14 метод addTodo
13:32 декомпозиция - классы Item и TodoItem
15:40 декомпозиция - класс DOM
16:59 метод render
21:00 метод класса DOM для создания элементов
23:34 стили CSS
28:44 класс LocalStorage
31:57 bindEvents - делегирование событий
35:00 метод removeTodo
36:09 метод toggleTodo - логика completed
38:02 стиль для completed и баг со стилями
41:00 стили CSS для completed
41:50 добавление html элемента в todo
42:33 полезное свойство CSS
45:20 проверка работы приложения
46:40 финиш

▶ ПОДДЕРЖАТЬ можно тут - Boosty: https://boosty.to/dmitry_ko
▶ Telegram: https://t.me/Dmitry_Kolotilshikov
▶ GitHub: https://github.com/DmitryKolotilshikov
▶ Linkedin:   / kolotilshikov  
▶ Графический дизайн и анимация: https://t.me/getlogo

📎 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] ПРЕПРОЦЕССОРЫ SASS | S...  
🔑 SVG, svg-спрайты (2 видео):    • 53. Frontender[1.0] Векторная графика SVG ...  
🔑 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 написание полноценного приложения;

JavaScript - TODO приложение на классах в ООП стиле

📢 Автор: Дмитрий Колотильщиков
#js #frontend #javascript