Пишем Todo List на чистом JavaScript. Гайд для зеленых
Kit, 444Содержание:
Подготовка:
1. Git, GitHub
Чтобы работать с гитом нужна консоль. Узнай про базовые bash-команды Linux (cd, ls, touch, mkdir - основные команды, чтобы перемещаться по файловой системе).
Есть несколько вариантов работы: если у тебя Windows 10 - ставь WSL. Делаешь по гайду (в видеоформате), доступ к жесткому диску можно получить по адресу cd ~/mnt/ (либо открывать терминал убунты сразу в нужной директории)
Иначе, если у тебя Windows ниже десятки, ставь cmder. На 10 тоже можно накатить, но зачем, если есть WSL.
Если у тебя Linux, то вообще все круто: ничего кроме гита накатывать не надо.
Можно, конечно, вообще без WSL, однако рано или поздно можешь столкнуться с тем, что проект отлично работающий на какой-нибудь федоре или макоси отказывается запускаться на винде
2. Основные команды:
Если никогда не работал с гитом - https://githowto.com/ru
git add . (добавляем в трекинг все файлы)
git status (узнаем что изменили)
git commit -m ‘commit text’ (пишем коммит)
git push -u origin master (флаг -u позволяет после одного пуша писать просто git push) (пушим все в наш гитхабик)
Начинаем
Во-первых, ты встретишь много непонятных слов. ГУГЛИ. Очень много гугли. Пример запроса: queryselector mdn
Первая ссылка будет на https://developer.mozilla.org/ru/docs/Web/API/Document/querySelector
developer.mozilla.org, он же mdn - просто Грааль. Это справочник, а значит НЕ нужно читать все подряд и пытаться запомнить (у тебя не получится, не спорь со мной). Встретил незнакомое слово или не понимаешь - гугли. Это твой лучший друг. Во время работы ты будешь заниматься тем же самым.
Создаем папочки на нужном жестком диске: Projects, а внутри todo
Заходим на свой гитхаб, создаем репозиторий с таким же названием todo и следуем гайду, чтобы инициализировать в нашей папке на компьютере проект и подключить его к репозиторию
если хочешь по ssh работать с гитом, то есть чтобы не писать логин и пароль каждый раз на пуш, нужно сгенерировать ключ в консоли в рутовой папке (~) с помощью ssh-keygen и открыть командой cat ./ssh/id_rsa.pub файлик с ключем, скопировать текст и вставить в настройках профиля. Подробный гайд
Далее создаем вот такую структуру:
─── css
─── style.css
─── js
─── todo.js
── index.html
── README.md
Писать код логики будем в todo.js, но для начала нам нужна подготовить верстку в index.html:
!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>TODO</title>
</head>
<body>
<div class="block">
<div class="control">
<input class="field" placeholder="Введи задачу">
<button class="add" type="button">+</button>
</div>
<div class="list"></div>
</div>
<script defer src="js/todo.js"></script>
</body>
</html>
Мы тут обозначили общий блок, блок для инпута и кнопки, сам инпут, кнопку и контейнер для тасок.
Пишем логику
ДИСКЛЕЙМЕР: ЧТО-ТО НЕ ПОНЯТНО? Пишем в коде console.log(yourshit) и логируем. Гуглим. Не находим на первой странице гугла - спрашиваем в чате
Итак, у документа есть метод querySelector, который принимает строку в аргумент, со значением класса или айди. Смотри в MDN, там доступно показано.
Кладем в константы филд, кнопку и див лист (все это в todo.js). Выглядит это как:
Небольшое отступление о принципах работы JavaScript. Движок делит парсинг кода на две части, left hand operation и right hand operation. Сначала он видит слева до знака равно, что ты объявил константу (const zhopa), он выделяет память, потом выполняет справа ФУНКЦИЮ (мы видим, что используем скобки, поэтому это вызов функции: pizda()) и ее результат записываем в память, которую выделили для zhopa.
Еще раз, мы говорим JS: "Задай zhopa, которая равняется результату функции pizda". pizda отдает нам что-то с помощью return и в жопе будет лежать элемент, который мы вернули из pizda
Первая функция, которая нам понадобится, это createTask. Во-первых, создаем элемент div (createElement) и кладем в константу под названием, например, task.
Пусть функция принимает параметр value, а мы зададим textContent равный аргументу функции. Теперь при вызове функции создается таска, ей задается textContent, который равен аргументу функции. Осталось вернуть ее (просто return task).
Теперь у нас есть функция, которая как фабрика создает таски, но больше она ничего не знает, ей и не надо.
Делаем вторую функцию addTask, которая проверяет, если наш филд (который ты указал в начале файла, достав квериселектором) имеет value, то создаем инстанс (экземпляр) таски, вызывая функцию createTask со значением field.value, присваивая константе.
Итак, вызвали мы функцию createTask с аргументом филдвелью, положили в константу, теперь обращаемся к листу (который тоже достали квериселектором) и ему аппендим чайлд (такой метод) нашу таску, очищаем филдвелью (приравниваем к пустой строке)
В результате у тебя две функции: одна создает, другая добавляет в дом
Теперь нужно лишь добавить к кнопке (которую также выбрали квериселектором в начале) eventListener. Это такая штука, которая подписывается на взаимодействие с элементом, первый параметр в аргументах будет 'click', обрабатывая клик, а вторым параметром, соответственно, функция addTask
То есть, вводя что-то в инпут, нажимая кнопку добавить, происходит вызов функции addTask, которая смотрит, есть ли в инпуте что-либо, если есть, вызывает createTask с велью инпута.
Основной функционал готов.
Дело осталось за малым. В функции createTask стоит к таске добавить стили (например через classList.add)
Добавь к чекбоксу класс 'status', не забудь сделать append чекбокса к таске и повесить на него листенер в функции createTask. В листнере сделай реагирование на клик и туда мы передадим еще одну функцию: completeTask, которую создадим вне функции createTask.
В completeTask все просто. В аргументы передаем ей event.
Когда на элементе есть eventListener, браузер автоматически прокидывает объект event в первый аргумент функции, которая используется в лиснере. Это удобный объект с кучей свойств и методов, в нем лежит инфа события клика (или любого другого события). Прочитай про event.target, про current.target, всплытие. 2 часть учебника learn.javascript.ru тебе в помощь
Достаешь event.target и кладешь в константу и вот мы получили элемент, на который щелкнули.
Итак чекбокс мы получили, теперь нужно получить контейнер с таской. Сделать это можно с помощью parentElement
Сначала надо проверить чекбокс, отмечен ли он. Если да - то добавляем таске класс 'success', если нет - удаляем (гугли classList.remove). Осталось в css этому классу дать стиль, например на зачеркивание.
Вот и все
Поздравляем, ты лишен фронтендерской девственности, главный шаг уже сделан, главное не останавливаться при дальнейших трудностях, спрашивать непонятные моменты и вкат гарантирован. Удачи!