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

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

[@СемёнЗахаренко-л8з]

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

[@shprints84]

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

[@pxxx6196]

тоже самое

[@runak56]

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

[@ssr.1989]

Кратко, чётко, ясно и без излишеств!!! Спасибо большое! Теперь лучше понимаю как делать todo с localStorage.

[@armazet8081]

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

[@Natali_Max]

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

[@Awe88Some]

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

[@aleksanderr4673]

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

[@АлисаЛиса-з2л]

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

[@antonmakarov8669]

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

[@ЮлияМостовая-ю7т]

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

[@simonbryczkowski8675]

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

[@razvalnuy]

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

[@ЮлияНикифорова-з1э]

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

[@VeroNi4ka92]

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

[@katenka_katrusya]

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

[@nikomunikabelen8540]

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

[@НиколайСтепанов-ю3м]

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

[@НискемкромеСовести]

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

[@dm92mk]

мознгн

[@tpostolova]

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

[@uliqqesss__]

Спасибо большое за чудесный курс 😊

[@VideosFromNorway]

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

[@MrGreenman02]

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

[@WebCademy]

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

[@uk-lych_sveta]

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

[@WebCademy]

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

[@uk-lych_sveta]

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

[@la_la4997]

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

[@ea4613]

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

[@artemsergeev4833]

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

[@pechkinjohn]

Спасибо! Очень подробно и понятно все❤

[@POEOneLove]

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

[@GreatOsmanSultan]

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

[@ТимурДжабаров-п4ю]

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

[@Мария-ц8ъ2е]

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

[@jasurbekshomaqsudov2208]

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

[@sartjhon3300]

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

[@jasurbekshomaqsudov2208]

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

[@dm92mk]

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

[@XNADA93LB]

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

[@Balenciaga_police]

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

[@СтаниславГорячев-г1ъ]

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

[@СергейМурин-ь8х]

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

[@max-anna]

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

[@crn05]

Очень четко 🤟

[@WockeezChannel]

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

[@clojure_sith]

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

[@artemsergeev4833]

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

[@dm92mk]

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

[@dm92mk]

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

[@johngalt6376]

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

[@Anatoli-bq1pe]

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

[@dokers2084]

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

[@rostyslavkinash5232]

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

[@banderprofi]

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

[@MelkoR4111]

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

[@banderprofi]

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

[@MelkoR4111]

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

[@banderprofi]

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

[@MelkoR4111]

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

[@deGGenerate]

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

[@bearddev9974]

Супер

[@СтаниславГорячев-г1ъ]

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

[@SNSDfOu]

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

[@MurodilIbroximov-pq1wl]

Very Good Practice

[@saidyusupov8686]

Здравствуйте, есть ли другой способ кроме insertadjacentHtml . не хочется что бы код html был в js . через createelement , appendchild

[@anndyy7]

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

[@ЕвгенияАлехина-в2я]

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

[@egorov-dev]

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

[@gerz_og]

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

[@alEL321]

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

[@vaspurakavdalian1133]

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

[@WebCademy]

t.me/c/1579074518/97

[@vaspurakavdalian1133]

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

[@dmaberlin]

Спасибо!!!

[@dd4el12]

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

[@torycat1337]

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

[@WebCademy]

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

[@ruslantt7528]

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

[@WebCademy]

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

[@development76]

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

[@KarandashChannel]

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

[@ludoman228zxc]

Есть кто живой? Почему у меня кнопка формы ничего не отправляет по событию "submit"? если переделать событие на "click", тогда все работает, но так как все это висит на форме, то клик отрабатывает по любому элементу формы. Кликаешь на инпут, чтоб ввести данные, тебе сразу добавляет в список пустую задачу

[@otollfe9183]

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

[@АлександрПантюхин-о3ъ]

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

[@WebCademy]

Делать на electron js

[@Ксюша-у1я]

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

[@ostapmiklysh9470]

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

[@ishurabotu9424]

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

[@66luv6]

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

[@ishurabotu9424]

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

[@theoty-js]

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

[@host_admin]

А как сделать счетчик который будет считат количество задач ?

[@ВалерийДынько]

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

[@ShaDe059]

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

[@МаксимСафронов-ф9ж]

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

[@rvitalia1]

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

[@ИльяЩербаков-э4р]

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

[@WebCademy]

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

[@Landskrunn]

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

[@WebCademy]

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

[@lolerkapich]

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

[@dogvscatfunny9956]

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

[@WebCademy]

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

[@Sergey-off]

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

[@oleksandrlitash1751]

спробуй сам)

[@mirzomok]

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

[@WebCademy]

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

[@МашаБукина-в1ц]

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

[@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. Заработало ;)

[@unknown.6914]

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