Разработка приложения "Список задач" на JavaScript с нуля. Часть №1 (базовый курс)
Вставка
- Опубліковано 19 чер 2024
- ✍️Курс: Создание веб-приложения "Список задач" на чистом JS с нуля до результата.
Что разрабатываем: в данном видео пишем на чистом JS логику приложения для списка задач. В курсе делаю акцент на работу с данными и на понимание программирования на JavaScript, в видео не показана вёрстка и стилизация проекта, упор конкретно на JS и программирование.
Рекомендую изучать новичкам, которые умеют верстать простые сайты, осознают базовую логику работы HTML и CSS, но имеют трудности с JS.
📹Тайм-коды к видеокурсу:
00:00 - содержание курса, план занятия
01:56 - написание кода для работы c UI
02:09 - обзор файловой структуры проекта
03:04 - разбор HTML-файла
04:32 - разбор файла стилей CSS
05:26 - как я стилизовал компонент-аккордеон
08:23 - начало разработки приложения на JS
09:11 - создание переменных для работы c интерфейсом
13:40 - создание массивов задач
14:46 - обработка клика по кнопке "создать задачу"
19:25 - создание кнопки "выполнить задачу"
26:11 - реализация удаления задачи "deleteTask"
27:45 - реализация функции "сделать задачу важной"
31:28 - обработка клика по кнопке "очистить всё"
33:00 - обработка клика по клавише Enter
35:43 - модификация метода doneTask и реализация добавления задачи в список "выполненные"
38:35 - начало работы с данными, рефакторинг метода создания задачи
41:45 - доработка метода deleteTask
43:47 - реализации логики работы с данными в doneTask
49:43 - разработка логики работы данных в методе makeImportantTask
51:45 - доработка метода clearBtn
52:20 - вариация дебага приложения
53:39 - работа с localStorage
55:51 - реализация метода DOMContentLoaded
59:42 - рефакторинг
1:00:36 - дебаг
1:02:43 - доработка метода DOMContentLoaded
01:03:35 - доработка clearBtn
01:04:02 - создание функционала сортировки задач
01:06:03 - дебаг star-important
01:10:10 - глобальный рефакторинг кода и функций
01:15:37 - МОТИВАЦИЯ!
✏️Автор курса:
- Telegram: @IT_shopen
Готовый проект на GitHub и материалы для прохождения курса находятся в моём ТГ-канале в посте, ниже оставлю в закреплённом комментарии ссылку на него.
Благодарю за просмотр!
#javascript #frontend
Ссылка на исходники к курсу: t.me/IT_shopen/126
Очень круто, спасибо
Отличное видео! Очень информативно! Спасибо что стараешься! Удачи в развитии!
Красавчик брат, мастер своего дела. продолжай в том же духе. сделай еще ролики брат по vue js, react js, angular и typescript и т.д
Спасибо! Буду стараться! По TS и React будут 100%, а вот на счёт Angular и vue маловероятно, так как не владею ими сам и не вижу смысла при наличии React в багаже знаний.
Интересный курс, мне очень зашёл, прокачал знания по JS, стало лучше получатся писать свои собственные функции в коде. Было бы круто такое же по реакту увидеть от тебя, скажит будут такие курсы на канале?
Благодарю! Сделаем и по ReactJS, всё будет скоро)
У тебя очень хорошо получается, продолжай развивать канал)
Благодарю!
давай по чаще делись знаниями брат )