Проект на JavaScript Приложение список задач ToDo

Пишем ToDo приложение на чистом JavaScript. Подробный урок для начинающих.

✅ Работа с DOM
✅ Отслеживание событий
✅ Отображение элементов на странице
✅ Работа с localStorage

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 05 Августа 2024 года.

Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 12 Августа 2024 года.

💻 Курс "Разработка сайтов на PHP + MySQL":
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.

🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Тайм коды:

00:00 Обзор проекта
02:03 Старт работы над проектом
04:42 Добавление задач
17:26 Очистка поля ввода и фокус
19:07 Блок "Список дел пуст"
22:48 Рефакторинг
25:37 Удаление задач
34:21 Блок "Список дел пуст"
36:27 Отмечаем выполненные задачи
45:02 Рефакторинг
50:40 Сохранение разметки в localStorage
1:00:08 Работа с данными
1:03:15 Данные. Добавление задач
1:12:31 Данные. Удаление задач
1:22:04 Данные. Удаление задач через фильтр массива
1:27:07 Данные. Статус done
1:32:38 Данные. Блок "Список дел пуст"
1:41:38 Данные. Сохранение массива с задачами в localStorage
1:52:58 Рефакторинг. Функция renderTask
1:58:01 Публикация проекта на GitHub pages

[WebCademy]

Тайм коды:

00:00 Обзор проекта
02:03 Старт работы над проектом
04:42 Добавление задач
17:26 Очистка поля ввода и фокус
19:07 Блок "Список дел пуст"
22:48 Рефакторинг
25:37 Удаление задач
34:21 Блок "Список дел пуст"
36:27 Отмечаем выполненные задачи
45:02 Рефакторинг
50:40 Сохранение разметки в localStorage
1:00:08 Работа с данными
1:03:15 Данные. Добавление задач
1:12:31 Данные. Удаление задач
1:22:04 Данные. Удаление задач через фильтр массива
1:27:07 Данные. Статус done
1:32:38 Данные. Блок "Список дел пуст"
1:41:38 Данные. Сохранение массива с задачами в localStorage
1:52:58 Рефакторинг. Функция renderTask
1:58:01 Публикация проекта на GitHub pages

[imjptfk]

Настолько просто и понятно, как будто осваиваю арифметику за первый класс. При вашем таланте вы можете с такой же легкостью объяснять ядерную физику или высшую математику. Спасибо!

[qrxudfy]

Большое спасибо за урок! Все подробно рассказано, что на этапе обучения очень важно. Смотрела несколько уроков, и только после вашего видео все встало на свои места, позднее еще пересмотрю, чтобы закрепить. Лайк и подписка!

[shprints]

Прохожу курсы в Скиллбоксе, запнулся на задаче сделать туду-приложение (там лектор очень быстро показал, как его делать, минут за 15). Решил поискать еще туториалы, посмотрел этот, и все стало намного понятнее. Большое вам спасибо!

[Natali_Max]

Два часа - как пара минут. Получила заряд верьіі в себя. Спасибо огромное!!!

[smzyucm]

Столько много полезной и интересной информации, вам большое спасибо за это видео!!!

[simonbryczkowski]

так мне не хотелось 2ух часовое видео смотреть, но как оказалось все на много круче чем я предпологал) Спасибо за работу!

[jsyqsge]

Лучший урок по тудушке что пересматривала за последнее время, спасибо за труд !!

[aleksanderr]

Очень четкая и приятно поставленная речь. Максимально доступно для понимания. Спасибо!!!!

[armazet]

Хочется от души хочу написать, что очень понравилась подача. Приятно стилизованая страница, спокойные объяснения - эталон к которому нужно стремится. Спасибо

[nikomunikabelen]

Спасибо, очень хороший урок
объяснение максимально понятные, что очень важно
первая часть на легке сделалась, ибо уже практиковал по вашим урокам
с данными конечно тяжко, непросто все эти нейронные связи создать, в моей трудной и долгой голове))
приходится по 5 раз одно и тоже с паузами переделывать))

[VeroNika]

Обалдеть, как, оказывается, всё может быть просто и понятно! Спасибо огромное!

[AweSome]

Божечки, как же круто! спасибо! это тот случай, когда сложное объясняют простыми словами! я понял, как работать с массивами, у меня были проблемы, я узнал, как обратиться вновь появившемуся элементу на странице, я теперь умею в localStorege! и даже знаю, как НЕ нужно его использовать)))) я искренне Вас благодарю, вы светлый человек! спасибо Вам за это объяснение! вроде ToDo list, а знаний полученных при написании этого кода я получил, как за курс JS! бесконечная благодарность! пересмотрю ваши видео, думаю, я стану гением после такой подачи информации! Живите долго и счастливо!

[ea]

Ух ты !!! Спасибо большое за урок 🙏. Классное подробное объяснение 👍. Отдельное спасибо за несколько вариантов решения одной задачи, проговаривание комбинаций клавиш для ускорения работы с кодом, красивость кода и публикацию на гитхабе. 🙏👍 Ждём-с 🧘‍♂️ SPA todo 😅😉

[antonmakarov]

Все работает, все супер. спасибо автору! Остался только один нюанс - по окончании написания кода убираем уже ненужный const emptyList в самом начале.

[jzeehnt]

Очень крутой урок. Кусочками пригодился, как раз застряла на опции удаления, пришлось подправить весь остальной код, но работает в итоге все шикарно. Спасибо!

[artemsergeev]

Спасибо! Все четко, доходчиво и понятно!

[thfrdux]

спасибо! Очень понравилаясь подача инф-ии, красивый и лаконичный код получился!

[dnryuwi]

Спасибо большое. Очень хорошее объяснение. Все понятно и легко.

[max-anna]

спасибо за урок! очень понятно объясняете👍🏼