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

Пишем ToDo приложение на чистом JavaScript. Подробный урок для начинающих.
✅ Работа с DOM
✅ Отслеживание событий
✅ Отображение элементов на странице
✅ Работа с localStorage
Стартовый код к уроку в ТГ канале: t.me/+9XtDDNBdHAk4Yjhi
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
Тайм коды:
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.ru/
Вконтакте: webcademy
Telegram канал: t.me/webcademynews
Закрытый канал с исходниками: t.me/+9XtDDNBdHAk4Yjhi
Ссылка на макет и код с вебинара: t.me/c/1579074518/75

[@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

[@user-im6jp8tf5k]

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

[@user-mu6ez4mv7h]

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

[@armazet8081]

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

[@aleksanderr4673]

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

[@user-js7yq6sg3e]

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

[@Awe88Some]

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

[@simonbryczkowski8675]

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

[@VeroNi4ka92]

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

[@shprints84]

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

[@pxxx6196]

тоже самое

[@runak56]

Да уже желание деньги обратно требовать, вообще поддержки ноль

[@la_la4997]

Вы чудесный преподаватель, спасибо вам!!!!!❤❤❤❤❤❤

[@ea4613]

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

[@nikomunikabelen8540]

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

[@antonmakarov8669]

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

[@uk-lych_sveta]

Юрий вы просто маг в IT индустрии, особенно в части объяснения и понятности того контента, который хотите донести своим подписчикам и другим посетителям Вашего канала. Спасибо за Ваш труд и старания. Желаю всяческих успехов и удачи.

[@WebCademy]

Спасибо за позитивный отзыв!)

[@uk-lych_sveta]

@@WebCademy Юрий, если это возможно сделайте пожалуйста мастер-класс по форме обратной связи на сайте, от начала до конца. Думаю зайдет всем начинающим верстальщикам.

[@artemsergeev4833]

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

[@GreatOsmanSultan]

Профи и талант преподавания! Спасибо.

[@tpostolova]

Как всегда, все четко и лаконично, спасибо Учитель

[@user-th6fr8du4x]

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

[@user-jz3ee7hn8t]

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

[@user-dn4ry3uw8i]

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

[@zmmr013]

Ну наконец то. Хоть кто-то написал пример на todo. Везде одни блоги и hello world, а тут todo

[@max-anna]

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

[@XNADA93LB]

спасибо за урок !!!!супер . шикарное детальное обьяснение.

[@katenka_katrusya]

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

[@user-lm9ee1gn5p]

Спасибо Вам очень понятная подача, низкий вам поклон

[@user-bo2fn9ye6b]

отличный обучающий материал. я прямо чую как растет мознг

[@dm92mk]

мознгн

[@MrGreenman02]

классный был урок!) получил не только знания но и удовольствие от учёбы!) теперь Javascript мне нравится еще больше!) Спасибо Юра за Труд!)

[@WebCademy]

Рад что было и полезно и интересно!) Спасибо за комментарий!)

[@VideosFromNorway]

Плюс еще один урок: done!Спасибо как всегда все класс!

[@clojure_sith]

Спасибо за практичный ролик, было очень полезно

[@razvalnuy]

Благодарю изучал локал сторайдж теория максимально легкая, но вот на практике думал как же будет правильно сделать и нашел у вас реализацию, спасибо!

[@Balenciaga_police]

Большое спасибо за ваши уроки

[@user-vp6bu3fg1o]

Спасибо, все просто шикарно

[@unknown.6914]

прекрасное видео, спасибо 😊

[@rostyslavkinash5232]

спасибо за урок

[@crn05]

Очень четко 🤟

[@Anatoli-bq1pe]

Благодарю за классный видос!

[@johngalt6376]

Наконец-то JavaScript в деле ))

[@WockeezChannel]

Какая у вас тема vscode, не подскажете?

[@dokers2084]

Спасибо за видео, какая у вас стоит цветовая тема VS code? Хочу такую же поставить

[@user-lp2cx3ru3e]

Клевое видео, осталась довольна

[@SNSDfOu]

спасибо, очень полезно

[@MurodilIbroximov-pq1wl]

Very Good Practice

[@jasurbekshomaqsudov2208]

Спасибо за урок, как раз я зделал тодо для портфолио.

[@sartjhon3300]

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

[@jasurbekshomaqsudov2208]

@@sartjhon3300 Ok, Спасибо

[@dm92mk]

@@sartjhon3300 я думаю ничего страшного не будет, если переписать всё заново и самостоятельно, по своему сверстать и оформить приложение, добавить дополнительные функции и т.д. Например добавить очки за выполнение дел чтобы был стимул их делать и т.д.

[@user-lm9ee1gn5p]

хотел поинтересоваться, а есть ли у вас курс только с практикой по js ?

[@dmaberlin]

Спасибо!!!

[@anndyy7]

Можно к этому как-то прикрутить создание диаграмм Ганта? На основе данных которые мы указываем в задаче? Подскажите куда копать

[@bearddev9974]

Супер

[@user-kq7wf5ys6r]

Добрый день, пытаюсь сделать по этому принципу список дел на одной странице для нескольких пользователей, столкнулась с тем, что работает только первая форма, если закомментить в html первую - работает вторая, а последующие - нет. Также пыталась разделить на три разные html страницы - та же история, работает только одна первая. Можете подсказать, пожалуйста, в какую сторону двигаться и что применить?

[@otollfe9183]

можете подсказать, как добавить функцию редактирование? Добавил кнопку, настроил ее нахождение, а саму функцию редактирования не могу придумать как прописать?

[@alEL321]

Профессионально.

[@dd4el12]

здраствуйте сейчас github pages автоматический не публикует сайт, надо написать самому домен. Но у меня каждый выходить ошибка, не могли бы подсказать как правильно написать?

[@user-egorov]

Спасибо за отличный урок! Если можно, подсказку, как удалить все выполненные задачи?:)

[@development76]

Здравствуйте, а где то можно скачать код этого урока? В вашей телеге не нашел(((

[@gerz_og]

начал только смотреть, может потом исправите. Почему инпут забираете отдельно если он уже есть в form который получили выше. Так по феншую вроде правильней.

[@deGGenerate]

Когда рефакторили код и выносили логику в отдельную хэндлер функцию можно было пройтись по теме модулей в js и вынести функцию в отдельный модуль

[@artemsergeev4833]

Проверку через trim() необходимо произвести, иначе добавляются задачи с пробелами и без текста. В функцию addTask добавить код if (taskInput.value.trim() == " ") return;

[@dm92mk]

что-то не работает пытаюсь понять в чем дело

[@dm92mk]

я короче глобально запретил вводить первым символом пробел taskInput.oninput = () => { if (taskInput.value.charAt(0) === ' ') { taskInput.value = "''; } }

[@user-jf8db4uy7w]

Скажите, а как реализовать эту же задачу, но чтоб не как веб сайт, а как приложение , которое открываеться на рабочем столе при нажатии на ярлык с этим приложением. Я исею ввиду, чтоб не index.html запускал , а например какой нить .exe файл или еще что нить ? Тоесть как его слелать не веб прилодением. Спасибо заранее за ответ

[@WebCademy]

Делать на electron js

[@banderprofi]

В настройках редактора надо изменить количество отступов с 4 на 2 - будет больше видно кода, можно ещё скрыть крайнюю левую вертикальную панель

[@MelkoR4111]

с 4 отступами удобнее

[@banderprofi]

@@MelkoR4111 Да ну, несколько вложенностей и конца и края не видать

[@MelkoR4111]

@@banderprofi экран больше покупай)

[@banderprofi]

@@MelkoR4111 С экран норм, у меня 34", ты просто мало пишешь, ещё не пришел к понимаю, что 4 - это много

[@MelkoR4111]

@@banderprofi у меня есть проекты где по 20к строк)) так что пишу нормально

[@ostapmiklysh9470]

а где файл взять?

[@user-ej1om4xo3n]

а можете кто нибудь объяснить в какой момент done меняется с false на true в newTask, мы ведь нигде не перезаписываем значение

[@ShaDe059]

В функции doneTask производится проверка, был ли клик по кнопке задача выполнена, в теле условия меняем значение done на противоположное - task.done = !task.done

[@user-he6je6ff6m]

После написания кода до 1:00:08 если добавить задачи и перезагрузить страницу а затем удалить эти задачи то тогда почему то блок "Список дел пуст" не появляется :( Почему? Проверьте у себя еще раз пожалуйста, возможно я где то допустил ошибку

[@WebCademy]

Посмотрите какие условия к нему прописаны. В любом случае сначала показываем/скрываем его на основании разметки, после на основании данных. Вариант с данными предпочтительнее. Во второй половине урока это показано. Код с урока есть в ТГ канале.

[@vaspurakavdalian1133]

Урок очень классный ,супер .Юрий ,я не смог найти стартовый код к уроку.Поискал в ТГ ,но не нашёл

[@WebCademy]

t.me/c/1579074518/97

[@vaspurakavdalian1133]

@@WebCademy Благодарю Юрий

[@user-ne2zn8kc9y]

В объяснение все максимально непонятно. Почему только, при сохранение разметки через localStorage, и удалении всех задач из списка, не появляется блок "Список дел пуст"?

[@rvitalia1]

насколько я понял, данные сохраняются в формате html collection. и когда идет адресация к emptylist он класс то удаляет, только не поянтно где.....и у нас уже получается не работает. поэтому вместо этого ставим: tasksList.children.item(0).classList.remove('none');

[@torycat1337]

Кращий, просто кращий)) Тільки є одне але, в аддтаск потрібно сказати, щоб в задачу не додавалися пусті поля, а так все гуд)

[@WebCademy]

Дякую) Да, можно добавить trim() чтобы обрезать пустые символы.

[@ruslantt7528]

35:14 Почему, если равно единице? Список дел долен быть пустым, чтобы появилось это окно, то есть должно быть "если меньше единицы". Не понимаю почему это работает

[@WebCademy]

emptyList и есть тот самы один элемент. Если задач нет, то остается только он.

[@ishurabotu9424]

Отличный урок, все предельно понятно, спасибо! Но, есть одно НО. После выгрузки из LocalStorage зачеркивание не убирается. Срабатывает, как и должно после обновления очередного, но, зачеркивание не убирается

[@66luv6]

такая же проблема, решил?

[@ishurabotu9424]

@@66luv6 да, там с классами я перемудрил, все забываю посмотреть)) Посмотри, что меняется при нажатии в браузере и что отличается при выгрузке локалСтораджа

[@Landskrunn]

Привет, как правильно называется объект описания задачи? const newTask = { id: Date.now(), text: taskText, done: false, } Это не прототип и конечно не класс, хочу знать когда это принято использовать, чтобы не сойти за говнокодера)

[@WebCademy]

Объект. Здесь сразу формируем объект. Можно было бы использовать Class или функцию конструктор. Но в данном случае - сразу формируем объект.

[@KarandashChannel]

Посмотрел, спасибо. Хороший урок. Но немного позабавил тот факт, что наравне с такими более - менее продвинутыми функциями языка, таких как навигация по dom и обработка событий, автор иногда останавливается на уточнении, что такое оператор присваивания, а что - сравнения))

[@theoty-js-react]

Всем рекомендую

[@lolerkapich]

Кто знает как удалить выполненные задачи по кнопке "удалить все выполненные задачи"?

[@Sergey-off]

не доделали. Не дописали код для кнопки удалить сделанные задачи

[@oleksandrlitash1751]

спробуй сам)

[@dogvscatfunny9956]

У этого автора так и не понял где взять стартовую страницу html?

[@WebCademy]

Стартовый код к уроку в ТГ канале: t.me/+9XtDDNBdHAk4Yjhi Переходите в ТГ канал и в нем ищите пост за 25.06.2022

[@mirzomok]

не понимаю зачем каждый раз проверять объявление переменной в console.log(кажется эт пустая трата времени)

[@WebCademy]

Урок для новичков. На первых порах порой такие простые ошибки проскакивают, поэтому лучше проверять каждую строчку кода.

[@user-lf6fk1fm6r]

Сложно объясняет,не чего удивительного нет,подача конечно плохая.

[@WebCademy]

Конкретика будет? Проект для тех кто знаком с основами. Посмотрите ролик JS за 6 часов. А перед этим рекомендую с версткой ознакомиться. Невозможно же каждое видео с совсем азов начинать.

[@jasurbekshomaqsudov2208]

Но я этих функций уже сделал, сейчас сделаю функции добавить фото, документы. Можно если я закончу свою тодо сайт, отправлю вам ссылку через гмаил или телеграм...Ну чтобы вы проверили мою работу. Потому что я сейчас учусь и у меня мало практики.

[@xxxxx-iy1lc]

Здравствуйте, я все делал как вы, но у меня в консоль выводить вот это (main.js:2087 Uncaught TypeError: Cannot read properties of null (reading 'insertAdjacentHTML') at HTMLFormElement.) выводит оно, когда мы выводить в шаблонные строки li . также я правильно обращаюсь к taskList.insertAdjacentHTML('beforeend', taskHTML), но я не могу разобраться в чем суть проблемы

[@WebCademy]

Cannot read properties of null - скорее всего в данном контексте элемент для которого вызывается insertAdjacentHTML не был найден, то есть неверно произведен поиск по querySelector.

[@LiSa-ld6ue]

Столкнулась с той же проблемой после того, как рефакторили код в самом конце. Дело в том, что переменная taskHTML стала локальной, когда мы её перенесли в отдельную функцию рендеренга задачи. Не знаю, правильно ли я сделала, но я объявила эту переменную через let taskHTML; в самом начале кода после объявления массива tasks. А в функции renderTask(task) соответственно убрала слово const. Заработало ;)