Создаём приложение To-do List на чистом JavaScript
Вы читаете вольный перевод статьи Building a To-do List App with vanilla JavaScript. В этой статье вы научитесь простыми средствами делать простые вещи, доступные любому новичку.
И так, на данном этапе вы немного изучили HTML, CSS и JavaScript, а теперь думаете, что бы такого написать? Садитесь поудобнее, мы проедем по этапам создания простого приложения To-Do List.
Что мы будем создавать
Я проведу вас по пути создания приложения To-Do List, в котором пользователь может создавать новые списки дел (To-Dos), вычёркивать сделанные пункты или удалять их, сохранять состояние списка дел, чтобы вернуться к нему позже, и удалять список дел целиком.
P.S: Я не UI/UX дизайнер, так что если дизайн приложения кажется вам посредственным, не парьтесь ��
Перейдём к делу
HTML
Прим. переводчика: самое время открыть редактор, создать index.html и переписать пример ниже под свой стиль.
CSS
CSS потребуется для стилизации нашего To-Do List, и тут всё определяет ваше мастерство. Впрочем, вы можете взять готовый пример на github, с которым страница будет выглядеть так:
Задний фон реализован не за счёт изображений, а помощью цветного градиента, для создания которого использован классный инструмент UI Gradients.
Сделаем кое-что посерьёзнее
JavaScript
Мы начнём с реализации механизма создания списка дел, чтобы пользователь мог ввести что-нибудь и нажать Enter для добавления пункта в список.
Прежде всего мы должны выбрать элементы input и ul на странице, используя DOM, и затем написать обработчик событий, который будет обрабатывать события нажатия клавиатуры. Все эти действия будут выполняться в функции onPageLoaded, которая вызывается после полной загрузки DOM, когда возникает событие DOMContentLoaded.
Следует отметить, что каждая клавиша на клавиатуре в JavaScript имеет предопределённый код, а код 13 соответствует клавише Enter. Для определения кода клавиши есть отличный сайт keycode.info.
Далее мы напишем функцию listenDeleteTodo, которая позволит пользователю удалять to-do.
Благодаря этой функции, каждый раз, когда пункт to-do создаётся, его иконка корзины получает способность удалять новый пункт по нажатию.
Далее объявим обработчик события нажатия на пункт to-do, зачёркивающий новый пункт как выполненный.
Теперь мы реализуем возможность сохранять и очищать состояние todo. Мы воспользуемся API LocalStorage, предоставляющим хранилище данных веб-страниц на стороне браузера пользователя.
Как обычно, мы выберем кнопки, с которыми мы будем работать из JavaScript, и добавим им обработчики события click.
В данном примере при нажатии кнопки “Сохранить” мы используем метод setItem() объекта window.localStorage, принимающий два строковых аргумента: ключ и значение. В обработчике нажатия кнопки “Очистить” мы используем метод removeItem() объекта window.localStorage, чтобы удалить данные из хранилища. Кроме того, в примере добавлены обработчики кнопок показа и скрытия элемента overlay, содержащего подсказки.
Теперь у нас осталась одна небольшая недоработка: когда пользователь повторно открывает ту же страницу в браузере, сохранённый им список дел не восстанавливается. Чтобы это исправить, мы напишем функцию для загрузки to-do.
Мы применили ещё один метод localStorage.getItem, позволяющий нам получить данные из хранилища по ключу. Сначала мы проверяем, что данные существуют, а затем устанавливаем сохранённое содержимое как внутренний html-код элемента ul, представляющего список дел. Написанную нами функцию loadTodos мы должны вызвать один раз при открытии страницы.
Вот и всё! Вы можете открыть пример автора оригинальной статьи Линды Икечукву в её github репозитории или посмотреть демо на github.io.
Как сделать to do list
Todo List на JavaScript
06.02.2023
0
906
Приложение списка дел на JavaScript с простым интерфейсом. Эта программа создает пользовательский интерфейс HTML с текстовым вводом и кнопкой «Add task». При нажатии кнопки «Add task» текст входных данных добавляется как новая задача в элемент taskList на странице. У каждой задачи есть кнопка удаления, при нажатии которой задача удаляется из списка. Задачи хранятся в элементах HTML на странице, поэтому они не сохраняются после обновления страницы. Если вы хотите сохранить данные, вы можете использовать локальное хранилище или решение на стороне сервера.
В этой статье попрактикуемся на чистом на JavaScript на примере создания программы «Списка дел (Todo List)». При написании кода будем использовать современный синтаксис, но также сделаем так чтобы он работал в старых браузерах, включая Internet Explorer 11.
Что такое Todo List?
Todo List – это список дел, которые вам нужно выполнить или того, что вы хотите сделать.
Традиционно их пишут на листке бумаги и организовывают в порядке приоритета. При выполнении задачи, её обычно вычеркивают из списка.
Но такой список можно вести не только на листке бумаги, но и в электронном виде, например, браузере.
Исходные коды SimpleTodoList
SimpleTodoList – это название проекта, который мы создадим в рамках данной статьи для ведения списка задач. Напишем его он на HTML, CSS и чистом JavaScript.
Пошаговый процесс его создания приведён в следующем разделе этой статьи, а в этом его демо и исходные коды.
Исходные коды SimpleTodoList расположены в соответствующей папки проекта «ui-components» на GitHub.
Состоит SimpleTodoList из 3 файлов: «index.html» (вёрстки), «simple-todo-list.css» (стилей) и «simple-todo-list.js» (скрипта).
SimpleTodoList использует localStorage для хранения задач. Это позволяет при повторном открытии этой страницы или её обновлении считывать данные с веб-хранилища и на их основе воссоздавать последнее состояние списка.
Сохранение данных в хранилище происходит всякий раз, когда изменяется состояния этого списка. Это необходимо для того, чтобы в localStorage всегда находились актуальные сведения.
добавлять новые задачи в список;
отмечать выполненные задачи (при этом они сразу исключаются из списка активных задач и переводятся в завершённый);
удалять элементы в корзину;
удалять окончательно задачи в корзине, а также при необходимости восстанавливать их;
переключаться между делами (активными, завершёнными и удалёнными);
автоматически сохранять списки дел в localStorage (необходимо для восстановления последнего состояния списка при повторном открытии страницы).
Описание процесса создания SimpleTodoList
Разработку SimpleTodoList выполним за 5 шагов.
Шаг 1. Создание файловой структуры
Файловая структура проекта:
Шаг 2. Добавление в index.html базовой структуры
Откроем «index.html», добавим в него базовую разметку, а также подключим файлы со стилями и JavaScript.
Todo List on pure JavaScript
Шаг 3. Выполнение разметки самого todo
Разметим блок todo:
текстовое поле ( с классом todo__text ) для ввода новой задачи;
кнопку .todo__add для добавления новой задачи в .todo__items ;
элемент управления с выпадающим список задач для переключения между ними;
список задач .todo__items , добавлять их в него будем с помощью JavaScript.
Скриншот того, что у нас вышло:
HTML-код самой задачи:
Его формирование и вставку в .todo__items будем осуществлять с помощью JavaScript.
Значение атрибута data-todo-state будет определять состояние задачи:
active – активная;
completed – выполненная;
deleted – удалённая.
.todo__task – это элемент, который содержит текст задачи, а .todo__action – это кнопки для выполнения действий над задачей. С помощью них мы можем восстановить задачу (перевести её в активное состояние), отметить задачу как завершённую и удалить. Действие, которое выполняет кнопка .todo__action определяется значением атрибута data-todo-action .
Шаг 4. Написание стилей
Написать стили можно по-разному. Пример того, что получилось:
Конечный CSS код можно посмотреть на GitHub.
Разберём некоторые интересные моменты в этом коде.
1. Переключение отображение задач в .todo__items будем выполнять в зависимости от выбранной опции . Для этого в вышеприведённом файле прописаны следующие стили:
Например, кнопку восстановить .todo__action_restore не будем отображать для активных задач [data-todo-state=»active»] . Т.к. зачем переводить задачу в активное состояние, если она и так активна.
Шаг 5. Напишем JavaScript
Написание кода начнём с создания объекта todo :
JavaScript
const todo = {};
Он нужен только для того, чтобы лучше организовать наш код и не создавать кучу отдельных функций.
Когда мы указываем в качестве обработчика функцию или метод объекта, то нужно просто передать ссылку, а не вызов.
При указании this.action мы с помощью bind установили в качестве this текущий контекст. Это нужно чтобы мы могли в action() получить объект todo с помощью this .
Метод create() очень простой, он будет просто возвращать HTML код самой задачи с указанным текстом:
JavaScript
save() получает содержимое .todo__items и устанавливает его в localStorage:
При вызове устанавливает атрибуту data-todo-option элемента .todo__items значение выбранной опции , а также значение свойству disabled элемента .todo__text :
add() добавляет при нажатии на кнопку задачу в список .todo__items . Для создания HTML-кода задачи используется create() :
Параметр e – это объект события event . Его создаёт браузер и передаёт его в качестве первого аргумента action .
В коде e.target – это элемент, по которому кликнули. Так как нам нужны не любые клики, а только по определённым элементам, то используем следующие условия:
JavaScript
if (target.classList.contains('todo__action')) { // . } else if (target.classList.contains('todo__add')) { // . }
Если пользователь кликнул по .todo__add , то выполним следующие действия:
JavaScript
this.add(); this.save();
add() добавляет в список .todo__items новую задачу, а save() сохраняет все задачи (содержимое .todo__items ) в localStorage.
Когда пользователь кликнул на .todo__action выполняется следующий код:
Первое – получаем действие, которое нужно выполнить. Оно у нас находится в атрибуте data-todo-action . Далее находим элемент .todo__item и сохраняем его в переменную elemItem . Этот элемент нам понадобится дальше. После этого, если действие delete и состояние задачи delete , то удаляем элемент. В противном случае установим атрибуту data-todo-state элемента .todo__item значение action . В конце сохраним все изменения в localStorage с помощью save() .
Последнее что нужно сделать чтобы Todo работал это вызвать init :
JavaScript
todo.init();
Преобразование JavaScript для запуска в Internet Explorer 11
1. Выполним транспилирование, т.е. преобразуем исходный синтаксис в такой, который понимают старые браузеры, включая Internet Explorer 11.
Для этого воспользуемся онлайн инструментом Babel REPL:
В targets указали: defaults, ie 11 .
Полученный код скопируем и вставим в файл simple-todo-list.es5.js .
Теперь полученный синтаксис понимает Internet Explorer 11. Но этого не достаточно, т.к. в коде у нас остались два метода, который данный браузер не поддерживает. Это closest и remove .
2. Выполним полифилинг, т.е. добавим эти недостающие методы к старым браузерам путем предоставления им собственной версии.
JavaScript
// polyfill closest if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector if (!Element.prototype.closest) while (el !== null && el.nodeType === 1); return null; }; } // polyfill remove if (!('remove' in Element.prototype)) { Element.prototype.remove = function() { if (this.parentNode) { this.parentNode.removeChild(this); } }; }
В результате получился следующий код: simple-todo-list.es5.js .
Задачи
1. Добавить возможность создавать задачу при нажатии Enter.
2. Переписать код так, чтобы в localStorage сохранялись задачи не в виде кода HTML, а в формате массива объектов:
// Создайте кнопку «Закрыть» и добавьте ее к каждому элементу списка var myNodelist = document.getElementsByTagName(«LI»); var i; for (i = 0; i < myNodelist.length; i++) var span = document.createElement("SPAN"); var txt = document.createTextNode(«\u00D7»); span.className = «close»; span.appendChild(txt); myNodelist[i].appendChild(span); >
// Нажмите на кнопку «Закрыть», чтобы скрыть текущий элемент списка var close = document.getElementsByClassName(«close»); var i; for (i = 0; i < close.length; i++) close[i].onclick = function() var div = this.parentElement; div.style.display = «none»; > >
// Добавить «checked» символ при нажатии на элемент списка var list = document.querySelector(‘ul’); list.addEventListener(‘click’, function(ev) if (ev.target.tagName === ‘LI’) ev.target.classList.toggle(‘checked’); > >, false);
// Создайте новый элемент списка при нажатии на кнопку «Добавить» function newElement() var li = document.createElement(«li»); var inputValue = document.getElementById(«myInput»).value; var t = document.createTextNode(inputValue); li.appendChild(t); if (inputValue === ») alert(«Вы должны что-то написать!»); > else document.getElementById(«myUL»).appendChild(li); > document.getElementById(«myInput»).value = «»;
var span = document.createElement(«SPAN»); var txt = document.createTextNode(«\u00D7»); span.className = «close»; span.appendChild(txt); li.appendChild(span);
for (i = 0; i < close.length; i++) close[i].onclick = function() var div = this.parentElement; div.style.display = «none»; > > >
