Создание приложения «Список дел» на JavaScript, HTML и CSS | Проект на JavaScript для начинающих
Code Explained
0:00 / 0:00
Создание приложения «Список дел» на JavaScript, HTML и CSS | Проект на JavaScript для начинающих
294 964 просмотра · 7 лет назад
Code Explained
43,1 тыс. подписчиков
294 964 просмотра · 7 лет назад
В этом уроке начинающий программист на JavaScript сможет создать красивый и функциональный список дел.
Я расскажу о логике каждой строки кода, прежде чем открыть текстовый редактор и начать набирать код.
Это пошаговый урок, вы не запутаетесь ни на одном этапе.
Открыв папку, вы найдете все необходимые файлы для начала работы, код CSS уже набран (см. файл style.css), так как мы не будем говорить о CSS в нашем уроке. Мы будем говорить только об HTML и JavaScript.
Список дел, который мы собираемся создать, имеет красивый пользовательский интерфейс: пользователь может добавить задачу, заполнив поле ввода и нажав Enter, после чего он может отметить задачу как выполненную или удалить ее с помощью кнопки Delete.
Список дел пользователя хранится в локальном хранилище, поэтому при обновлении страницы он всегда сможет найти список там.
У пользователя есть возможность очистить список, нажав кнопку «Очистить» в правом верхнем углу нашего приложения.
Приложение «Список дел» отображает пользователю сегодняшнюю дату, для чего мы используем метод `toLocaleDateString`, о котором вы можете прочитать здесь: https://developer.mozilla.org/en-US/d...
Если вы хотите следить за мной, когда я буду писать код, вам нужно будет загрузить стартовый шаблон с GitHub.
-------------------------------------------------------------------------------------------------
| ССЫЛКИ |
-----------------------------------------------------------------------------------------------------
СКАЧАТЬ ИСХОДНЫЙ КОД + СТАРТОВЫЙ ШАБЛОН:
https://www.codeexplained.org/2019/03...
🌍 Ссылки на социальные сети.
◾ Facebook: / code.explained.official
◾ Twitter: / code_explained
◾ Instagram: / code.explained.official
◾ GitHub: https://github.com/CodeExplainedRepo
💲 Поддержите канал
Paypal: https://paypal.me/CodeExplained
Купите мне кофе: https://www.buymeacoffee.com/CodeExpl...
-----------------------------------------------------------------------------------------------------
| ХЭШТЕГИ |
-----------------------------------------------------------------------------------------------------
#дляначинающих #javascript #списокзадач #дляначинающих #уроки
0:00 Вступление
2:22 Элементы
2:58 HTML со ссылками на CSS и шрифты
3:49 Выбор элементов
6:25 insertadjacentHtml()
8:23 Добавить в список задач
10:18 Код
10:23 Сохранить список задач
13:05 Код
13:09 Обновить toDo()
16:41 Код
16:46 Задача выполнена
20:39 Код
20:43 Удалить из списка задач
21:54 Код
21:56 Целевой элемент создан динамически
24:06 Код
24:14 Сохранить список задач в локальное хранилище
25:00 Код
25:04 Восстановить список задач из локального хранилища
27:16 Код
27:19 Очистить локальное хранилище
28:56 Ввод кода в редакторе