Тайм коды: 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
Настолько просто и понятно, как будто осваиваю арифметику за первый класс. При вашем таланте вы можете с такой же легкостью объяснять ядерную физику или высшую математику. Спасибо!
Прохожу курсы в Скиллбоксе, запнулся на задаче сделать туду-приложение (там лектор очень быстро показал, как его делать, минут за 15). Решил поискать еще туториалы, посмотрел этот, и все стало намного понятнее. Большое вам спасибо!
Хочется от души хочу написать, что очень понравилась подача. Приятно стилизованая страница, спокойные объяснения - эталон к которому нужно стремится. Спасибо
Божечки, как же круто! спасибо! это тот случай, когда сложное объясняют простыми словами! я понял, как работать с массивами, у меня были проблемы, я узнал, как обратиться вновь появившемуся элементу на странице, я теперь умею в localStorege! и даже знаю, как НЕ нужно его использовать)))) я искренне Вас благодарю, вы светлый человек! спасибо Вам за это объяснение! вроде ToDo list, а знаний полученных при написании этого кода я получил, как за курс JS! бесконечная благодарность! пересмотрю ваши видео, думаю, я стану гением после такой подачи информации! Живите долго и счастливо!
Большое спасибо за урок! Все подробно рассказано, что на этапе обучения очень важно. Смотрела несколько уроков, и только после вашего видео все встало на свои места, позднее еще пересмотрю, чтобы закрепить. Лайк и подписка!
Юрий вы просто маг в IT индустрии, особенно в части объяснения и понятности того контента, который хотите донести своим подписчикам и другим посетителям Вашего канала. Спасибо за Ваш труд и старания. Желаю всяческих успехов и удачи.
@@WebCademy Юрий, если это возможно сделайте пожалуйста мастер-класс по форме обратной связи на сайте, от начала до конца. Думаю зайдет всем начинающим верстальщикам.
Очень крутой урок. Кусочками пригодился, как раз застряла на опции удаления, пришлось подправить весь остальной код, но работает в итоге все шикарно. Спасибо!
Спасибо, очень хороший урок объяснение максимально понятные, что очень важно первая часть на легке сделалась, ибо уже практиковал по вашим урокам с данными конечно тяжко, непросто все эти нейронные связи создать, в моей трудной и долгой голове)) приходится по 5 раз одно и тоже с паузами переделывать))
Ух ты !!! Спасибо большое за урок 🙏. Классное подробное объяснение 👍. Отдельное спасибо за несколько вариантов решения одной задачи , проговаривание комбинаций клавиш для ускорения работы с кодом, красивость кода и публикацию на гитхабе. 🙏👍 Ждём-с 🧘♂️ SPA todo 😅😉
не стоит его впихивать в портфолио ))) наверное, каждый ученик после курсов кидает тодо в портфолио, и потенциального работодателя или нанимателя уже тошнит от этих тодо
@@sartjhon3300 я думаю ничего страшного не будет, если переписать всё заново и самостоятельно, по своему сверстать и оформить приложение, добавить дополнительные функции и т.д. Например добавить очки за выполнение дел чтобы был стимул их делать и т.д.
Проверку через trim() необходимо произвести, иначе добавляются задачи с пробелами и без текста. В функцию addTask добавить код if (taskInput.value.trim() == " ") return;
35:14 Почему, если равно единице? Список дел долен быть пустым, чтобы появилось это окно, то есть должно быть "если меньше единицы". Не понимаю почему это работает
начал только смотреть, может потом исправите. Почему инпут забираете отдельно если он уже есть в form который получили выше. Так по феншую вроде правильней.
Посмотрел, спасибо. Хороший урок. Но немного позабавил тот факт, что наравне с такими более - менее продвинутыми функциями языка, таких как навигация по dom и обработка событий, автор иногда останавливается на уточнении, что такое оператор присваивания, а что - сравнения))
Есть кто живой? Почему у меня кнопка формы ничего не отправляет по событию "submit"? если переделать событие на "click", тогда все работает, но так как все это висит на форме, то клик отрабатывает по любому элементу формы. Кликаешь на инпут, чтоб ввести данные, тебе сразу добавляет в список пустую задачу
здраствуйте сейчас github pages автоматический не публикует сайт, надо написать самому домен. Но у меня каждый выходить ошибка, не могли бы подсказать как правильно написать?
можете подсказать, как добавить функцию редактирование? Добавил кнопку, настроил ее нахождение, а саму функцию редактирования не могу придумать как прописать?
Отличный урок, все предельно понятно, спасибо! Но, есть одно НО. После выгрузки из LocalStorage зачеркивание не убирается. Срабатывает, как и должно после обновления очередного, но, зачеркивание не убирается
@@66luv6 да, там с классами я перемудрил, все забываю посмотреть)) Посмотри, что меняется при нажатии в браузере и что отличается при выгрузке локалСтораджа
Добрый день, пытаюсь сделать по этому принципу список дел на одной странице для нескольких пользователей, столкнулась с тем, что работает только первая форма, если закомментить в html первую - работает вторая, а последующие - нет. Также пыталась разделить на три разные html страницы - та же история, работает только одна первая. Можете подсказать, пожалуйста, в какую сторону двигаться и что применить?
Скажите, а как реализовать эту же задачу, но чтоб не как веб сайт, а как приложение , которое открываеться на рабочем столе при нажатии на ярлык с этим приложением. Я исею ввиду, чтоб не index.html запускал , а например какой нить .exe файл или еще что нить ? Тоесть как его слелать не веб прилодением. Спасибо заранее за ответ
В объяснение все максимально непонятно. Почему только, при сохранение разметки через localStorage, и удалении всех задач из списка, не появляется блок "Список дел пуст"?
насколько я понял, данные сохраняются в формате html collection. и когда идет адресация к emptylist он класс то удаляет, только не поянтно где.....и у нас уже получается не работает. поэтому вместо этого ставим: tasksList.children.item(0).classList.remove('none');
В функции doneTask производится проверка, был ли клик по кнопке задача выполнена, в теле условия меняем значение done на противоположное - task.done = !task.done
После написания кода до 1:00:08 если добавить задачи и перезагрузить страницу а затем удалить эти задачи то тогда почему то блок "Список дел пуст" не появляется :( Почему? Проверьте у себя еще раз пожалуйста, возможно я где то допустил ошибку
Посмотрите какие условия к нему прописаны. В любом случае сначала показываем/скрываем его на основании разметки, после на основании данных. Вариант с данными предпочтительнее. Во второй половине урока это показано. Код с урока есть в ТГ канале.
Привет, как правильно называется объект описания задачи? const newTask = { id: Date.now(), text: taskText, done: false, } Это не прототип и конечно не класс, хочу знать когда это принято использовать, чтобы не сойти за говнокодера)
Конкретика будет? Проект для тех кто знаком с основами. Посмотрите ролик JS за 6 часов. А перед этим рекомендую с версткой ознакомиться. Невозможно же каждое видео с совсем азов начинать.
Но я этих функций уже сделал, сейчас сделаю функции добавить фото, документы. Можно если я закончу свою тодо сайт, отправлю вам ссылку через гмаил или телеграм...Ну чтобы вы проверили мою работу. Потому что я сейчас учусь и у меня мало практики.
Здравствуйте, я все делал как вы, но у меня в консоль выводить вот это (main.js:2087 Uncaught TypeError: Cannot read properties of null (reading 'insertAdjacentHTML') at HTMLFormElement.) выводит оно, когда мы выводить в шаблонные строки li . также я правильно обращаюсь к taskList.insertAdjacentHTML('beforeend', taskHTML), но я не могу разобраться в чем суть проблемы
Cannot read properties of null - скорее всего в данном контексте элемент для которого вызывается insertAdjacentHTML не был найден, то есть неверно произведен поиск по querySelector.
Столкнулась с той же проблемой после того, как рефакторили код в самом конце. Дело в том, что переменная taskHTML стала локальной, когда мы её перенесли в отдельную функцию рендеренга задачи. Не знаю, правильно ли я сделала, но я объявила эту переменную через let taskHTML; в самом начале кода после объявления массива tasks. А в функции renderTask(task) соответственно убрала слово const. Заработало ;)
Тайм коды:
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
Настолько просто и понятно, как будто осваиваю арифметику за первый класс. При вашем таланте вы можете с такой же легкостью объяснять ядерную физику или высшую математику. Спасибо!
Прохожу курсы в Скиллбоксе, запнулся на задаче сделать туду-приложение (там лектор очень быстро показал, как его делать, минут за 15). Решил поискать еще туториалы, посмотрел этот, и все стало намного понятнее. Большое вам спасибо!
тоже самое
Да уже желание деньги обратно требовать, вообще поддержки ноль
Кратко, чётко, ясно и без излишеств!!! Спасибо большое! Теперь лучше понимаю как делать todo с localStorage.
Два часа - как пара минут. Получила заряд верьіі в себя. Спасибо огромное!!!
Хочется от души хочу написать, что очень понравилась подача. Приятно стилизованая страница, спокойные объяснения - эталон к которому нужно стремится. Спасибо
Очень четкая и приятно поставленная речь. Максимально доступно для понимания. Спасибо!!!!
Божечки, как же круто! спасибо! это тот случай, когда сложное объясняют простыми словами! я понял, как работать с массивами, у меня были проблемы, я узнал, как обратиться вновь появившемуся элементу на странице, я теперь умею в localStorege! и даже знаю, как НЕ нужно его использовать)))) я искренне Вас благодарю, вы светлый человек! спасибо Вам за это объяснение! вроде ToDo list, а знаний полученных при написании этого кода я получил, как за курс JS! бесконечная благодарность! пересмотрю ваши видео, думаю, я стану гением после такой подачи информации! Живите долго и счастливо!
Лучший урок по тудушке что пересматривала за последнее время, спасибо за труд !!
Большое спасибо за урок! Все подробно рассказано, что на этапе обучения очень важно. Смотрела несколько уроков, и только после вашего видео все встало на свои места, позднее еще пересмотрю, чтобы закрепить. Лайк и подписка!
так мне не хотелось 2ух часовое видео смотреть, но как оказалось все на много круче чем я предпологал) Спасибо за работу!
Как всегда, все четко и лаконично, спасибо Учитель
Все работает, все супер. спасибо автору! Остался только один нюанс - по окончании написания кода убираем уже ненужный const emptyList в самом начале.
Обалдеть, как, оказывается, всё может быть просто и понятно! Спасибо огромное!
Ну наконец то. Хоть кто-то написал пример на todo. Везде одни блоги и hello world, а тут todo
Очень хорошо объясняете, я бы сказала "разжёвываете")), приятно слушать, спасибо вам за видео, пошла смотреть другие)
отличный обучающий материал. я прямо чую как растет мознг
мознгн
Юрий вы просто маг в IT индустрии, особенно в части объяснения и понятности того контента, который хотите донести своим подписчикам и другим посетителям Вашего канала. Спасибо за Ваш труд и старания. Желаю всяческих успехов и удачи.
Спасибо за позитивный отзыв!)
@@WebCademy Юрий, если это возможно сделайте пожалуйста мастер-класс по форме обратной связи на сайте, от начала до конца. Думаю зайдет всем начинающим верстальщикам.
Столько много полезной и интересной информации, вам большое спасибо за это видео!!!
Плюс еще один урок: done!Спасибо как всегда все класс!
Вы чудесный преподаватель, спасибо вам!!!!!❤❤❤❤❤❤
Очень крутой урок. Кусочками пригодился, как раз застряла на опции удаления, пришлось подправить весь остальной код, но работает в итоге все шикарно. Спасибо!
Спасибо большое за чудесный курс 😊
Спасибо, очень хороший урок
объяснение максимально понятные, что очень важно
первая часть на легке сделалась, ибо уже практиковал по вашим урокам
с данными конечно тяжко, непросто все эти нейронные связи создать, в моей трудной и долгой голове))
приходится по 5 раз одно и тоже с паузами переделывать))
классный был урок!) получил не только знания но и удовольствие от учёбы!)
теперь Javascript мне нравится еще больше!) Спасибо Юра за Труд!)
Рад что было и полезно и интересно!) Спасибо за комментарий!)
Ух ты !!! Спасибо большое за урок 🙏. Классное подробное объяснение 👍. Отдельное спасибо за несколько вариантов решения одной задачи , проговаривание комбинаций клавиш для ускорения работы с кодом, красивость кода и публикацию на гитхабе. 🙏👍 Ждём-с 🧘♂️ SPA todo 😅😉
Спасибо! Все четко, доходчиво и понятно!
Спасибо! Очень подробно и понятно все❤
Профи и талант преподавания! Спасибо.
спасибо! Очень понравилаясь подача инф-ии, красивый и лаконичный код получился!
Благодарю изучал локал сторайдж теория максимально легкая, но вот на практике думал как же будет правильно сделать и нашел у вас реализацию, спасибо!
Очень четко 🤟
Спасибо, все просто шикарно
Большое спасибо за ваши уроки
Спасибо большое. Очень хорошее объяснение. Все понятно и легко.
спасибо за урок !!!!супер . шикарное детальное обьяснение.
Наконец-то JavaScript в деле ))
Какая у вас тема vscode, не подскажете?
Спасибо Вам очень понятная подача, низкий вам поклон
Спасибо за урок, как раз я зделал тодо для портфолио.
не стоит его впихивать в портфолио ))) наверное, каждый ученик после курсов кидает тодо в портфолио, и потенциального работодателя или нанимателя уже тошнит от этих тодо
@@sartjhon3300 Ok, Спасибо
@@sartjhon3300 я думаю ничего страшного не будет, если переписать всё заново и самостоятельно, по своему сверстать и оформить приложение, добавить дополнительные функции и т.д. Например добавить очки за выполнение дел чтобы был стимул их делать и т.д.
спасибо за урок! очень понятно объясняете👍🏼
спасибо за урок
Спасибо за практичный ролик, было очень полезно
Благодарю за классный видос!
Супер
Проверку через trim() необходимо произвести, иначе добавляются задачи с пробелами и без текста. В функцию addTask добавить код if (taskInput.value.trim() == " ") return;
что-то не работает пытаюсь понять в чем дело
я короче глобально запретил вводить первым символом пробел
taskInput.oninput = () => {
if (taskInput.value.charAt(0) === ' ') {
taskInput.value = "'';
}
}
Спасибо за видео, какая у вас стоит цветовая тема VS code? Хочу такую же поставить
Когда рефакторили код и выносили логику в отдельную хэндлер функцию можно было пройтись по теме модулей в js и вынести функцию в отдельный модуль
Very Good Practice
спасибо, очень полезно
В настройках редактора надо изменить количество отступов с 4 на 2 - будет больше видно кода, можно ещё скрыть крайнюю левую вертикальную панель
с 4 отступами удобнее
@@MelkoR4111
Да ну, несколько вложенностей и конца и края не видать
@@banderprofi экран больше покупай)
@@MelkoR4111
С экран норм, у меня 34", ты просто мало пишешь, ещё не пришел к понимаю, что 4 - это много
@@banderprofi у меня есть проекты где по 20к строк)) так что пишу нормально
хотел поинтересоваться, а есть ли у вас курс только с практикой по js ?
Клевое видео, осталась довольна
35:14 Почему, если равно единице? Список дел долен быть пустым, чтобы появилось это окно, то есть должно быть "если меньше единицы". Не понимаю почему это работает
emptyList и есть тот самы один элемент. Если задач нет, то остается только он.
Спасибо за отличный урок! Если можно, подсказку, как удалить все выполненные задачи?:)
начал только смотреть, может потом исправите. Почему инпут забираете отдельно если он уже есть в form который получили выше. Так по феншую вроде правильней.
Посмотрел, спасибо. Хороший урок. Но немного позабавил тот факт, что наравне с такими более - менее продвинутыми функциями языка, таких как навигация по dom и обработка событий, автор иногда останавливается на уточнении, что такое оператор присваивания, а что - сравнения))
Урок очень классный ,супер .Юрий ,я не смог найти стартовый код к уроку.Поискал в ТГ ,но не нашёл
t.me/c/1579074518/97
@@WebCademy Благодарю Юрий
Можно к этому как-то прикрутить создание диаграмм Ганта? На основе данных которые мы указываем в задаче? Подскажите куда копать
Спасибо!!!
Есть кто живой?
Почему у меня кнопка формы ничего не отправляет по событию "submit"? если переделать событие на "click", тогда все работает, но так как все это висит на форме, то клик отрабатывает по любому элементу формы. Кликаешь на инпут, чтоб ввести данные, тебе сразу добавляет в список пустую задачу
Здравствуйте, есть ли другой способ кроме insertadjacentHtml . не хочется что бы код html был в js . через createelement , appendchild
Профессионально.
Здравствуйте, а где то можно скачать код этого урока? В вашей телеге не нашел(((
здраствуйте сейчас github pages автоматический не публикует сайт, надо написать самому домен. Но у меня каждый выходить ошибка, не могли бы подсказать как правильно написать?
Кращий, просто кращий))
Тільки є одне але, в аддтаск потрібно сказати, щоб в задачу не додавалися пусті поля, а так все гуд)
Дякую) Да, можно добавить trim() чтобы обрезать пустые символы.
можете подсказать, как добавить функцию редактирование? Добавил кнопку, настроил ее нахождение, а саму функцию редактирования не могу придумать как прописать?
А как сделать счетчик который будет считат количество задач ?
а где файл взять?
Отличный урок, все предельно понятно, спасибо!
Но, есть одно НО. После выгрузки из LocalStorage зачеркивание не убирается. Срабатывает, как и должно после обновления очередного, но, зачеркивание не убирается
такая же проблема, решил?
@@66luv6 да, там с классами я перемудрил, все забываю посмотреть))
Посмотри, что меняется при нажатии в браузере и что отличается при выгрузке локалСтораджа
Добрый день, пытаюсь сделать по этому принципу список дел на одной странице для нескольких пользователей, столкнулась с тем, что работает только первая форма, если закомментить в html первую - работает вторая, а последующие - нет. Также пыталась разделить на три разные html страницы - та же история, работает только одна первая. Можете подсказать, пожалуйста, в какую сторону двигаться и что применить?
Всем рекомендую
Скажите, а как реализовать эту же задачу, но чтоб не как веб сайт, а как приложение , которое открываеться на рабочем столе при нажатии на ярлык с этим приложением. Я исею ввиду, чтоб не index.html запускал , а например какой нить .exe файл или еще что нить ? Тоесть как его слелать не веб прилодением. Спасибо заранее за ответ
Делать на electron js
В объяснение все максимально непонятно. Почему только, при сохранение разметки через localStorage, и удалении всех задач из списка, не появляется блок "Список дел пуст"?
насколько я понял, данные сохраняются в формате html collection. и когда идет адресация к emptylist он класс то удаляет, только не поянтно где.....и у нас уже получается не работает. поэтому вместо этого ставим: tasksList.children.item(0).classList.remove('none');
а можете кто нибудь объяснить в какой момент done меняется с false на true в newTask, мы ведь нигде не перезаписываем значение
В функции doneTask производится проверка, был ли клик по кнопке задача выполнена, в теле условия меняем значение done на противоположное - task.done = !task.done
После написания кода до 1:00:08 если добавить задачи и перезагрузить страницу а затем удалить эти задачи то тогда почему то блок "Список дел пуст" не появляется :( Почему? Проверьте у себя еще раз пожалуйста, возможно я где то допустил ошибку
Посмотрите какие условия к нему прописаны. В любом случае сначала показываем/скрываем его на основании разметки, после на основании данных. Вариант с данными предпочтительнее. Во второй половине урока это показано. Код с урока есть в ТГ канале.
Привет, как правильно называется объект описания задачи?
const newTask = {
id: Date.now(),
text: taskText,
done: false,
}
Это не прототип и конечно не класс, хочу знать когда это принято использовать, чтобы не сойти за говнокодера)
Объект. Здесь сразу формируем объект.
Можно было бы использовать Class или функцию конструктор. Но в данном случае - сразу формируем объект.
Кто знает как удалить выполненные задачи по кнопке "удалить все выполненные задачи"?
У этого автора так и не понял где взять стартовую страницу html?
Стартовый код к уроку в ТГ канале: t.me/+9XtDDNBdHAk4Yjhi
Переходите в ТГ канал и в нем ищите пост за 25.06.2022
не доделали. Не дописали код для кнопки удалить сделанные задачи
спробуй сам)
не понимаю зачем каждый раз проверять объявление переменной в console.log(кажется эт пустая трата времени)
Урок для новичков. На первых порах порой такие простые ошибки проскакивают, поэтому лучше проверять каждую строчку кода.
Сложно объясняет,не чего удивительного нет,подача конечно плохая.
Конкретика будет? Проект для тех кто знаком с основами. Посмотрите ролик JS за 6 часов. А перед этим рекомендую с версткой ознакомиться. Невозможно же каждое видео с совсем азов начинать.
Но я этих функций уже сделал, сейчас сделаю функции добавить фото, документы.
Можно если я закончу свою тодо сайт, отправлю вам ссылку через гмаил или телеграм...Ну чтобы вы проверили мою работу. Потому что я сейчас учусь и у меня мало практики.
Здравствуйте, я все делал как вы, но у меня в консоль выводить вот это (main.js:2087 Uncaught TypeError: Cannot read properties of null (reading 'insertAdjacentHTML')
at HTMLFormElement.) выводит оно, когда мы выводить в шаблонные строки li . также я правильно обращаюсь к taskList.insertAdjacentHTML('beforeend', taskHTML), но я не могу разобраться в чем суть проблемы
Cannot read properties of null - скорее всего в данном контексте элемент для которого вызывается insertAdjacentHTML не был найден, то есть неверно произведен поиск по querySelector.
Столкнулась с той же проблемой после того, как рефакторили код в самом конце. Дело в том, что переменная taskHTML стала локальной, когда мы её перенесли в отдельную функцию рендеренга задачи. Не знаю, правильно ли я сделала, но я объявила эту переменную через let taskHTML; в самом начале кода после объявления массива tasks. А в функции renderTask(task) соответственно убрала слово const. Заработало ;)
прекрасное видео, спасибо 😊