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