Как сделать to do list на javascript

Как сделать to do list на javascript

Todo List на JavaScript

06.02.2023

0

1 024

Приложение списка дел на JavaScript с простым интерфейсом. Эта программа создает пользовательский интерфейс HTML с текстовым вводом и кнопкой «Add task». При нажатии кнопки «Add task» текст входных данных добавляется как новая задача в элемент taskList на странице. У каждой задачи есть кнопка удаления, при нажатии которой задача удаляется из списка. Задачи хранятся в элементах HTML на странице, поэтому они не сохраняются после обновления страницы. Если вы хотите сохранить данные, вы можете использовать локальное хранилище или решение на стороне сервера.

To-Do List 
 
Add Task 
 
Стили:

.container < display: flex; flex-direction: column; align-items: center; >.header < margin-top: 20px; >.form < margin-top: 20px; display: flex; align-items: center; >input[type="text"] < width: 60%; padding: 10px; font-size: 20px; border-radius: 10px; border: 1px solid gray; margin-right: 10px; >button < padding: 10px 20px; background-color: cornflowerblue; border: none; border-radius: 10px; color: white; font-size: 20px; cursor: pointer; >.tasks < margin-top: 20px; width: 60%; display: flex; flex-direction: column; >.task < background-color: beige; padding: 10px; border-radius: 10px; margin-top: 10px; display: flex; justify-content: space-between; align-items: center; >.task-text

const addTask = () => < const taskInput = document.getElementById("taskInput"); const task = taskInput.value; if (!task) return; const taskList = document.getElementById("taskList"); const newTask = document.createElement("div"); newTask.classList.add("task"); const taskText = document.createElement("div"); taskText.classList.add("task-text"); taskText.innerHTML = task; const deleteButton = document.createElement("button"); deleteButton.innerHTML = "Delete"; deleteButton.onclick = () =>< taskList.removeChild(newTask); >; newTask.appendChild(taskText); newTask.appendChild(deleteButton); taskList.appendChild(newTask); taskInput.value = ""; >;

Создание Todo List на чистом JavaScript

В этой статье попрактикуемся на чистом на 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.

Шаг 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 будем выполнять в зависимости от выбранной опции . Для этого в вышеприведённом файле прописаны следующие стили:

[data-todo-option="active"] .todo__item:not([data-todo-state="active"]), [data-todo-option="completed"] .todo__item:not([data-todo-state="completed"]), [data-todo-option="deleted"] .todo__item:not([data-todo-state="deleted"]) { display: none; }

Устанавливать значение атрибуту data-todo-option элемента .todo__items будем с помощью JavaScript при изменении выбранной опции .

2. Скрытие кнопок для задач, которые не должны показываться для определённых состояний, осуществляется следующим образом:

[data-todo-state="active"] .todo__action_restore, [data-todo-state="completed"] .todo__action_complete, [data-todo-state="deleted"] .todo__action_complete { display: none; }

Например, кнопку восстановить .todo__action_restore не будем отображать для активных задач [data-todo-state=»active»] . Т.к. зачем переводить задачу в активное состояние, если она и так активна.

Шаг 5. Напишем JavaScript

Написание кода начнём с создания объекта todo :

JavaScript

const todo = {};

Он нужен только для того, чтобы лучше организовать наш код и не создавать кучу отдельных функций.

Поместим в todo следующие методы:

JavaScript

const todo = { action(e) {}, add() {}, create(text) {}, init() {}, update() {}, save() {} };

Начнём с init() . Данный метод будет осуществлять инициализацию Todo List.

Он выполняет следующие вещи:

• получает из localStorage сохранённый список дел и если он есть, то вставляет его в .todo__items ;
• назначает обработчик события change на элемент .todo__options ; в качестве обработчика используется update ;
• назначает обработчик события click на document ; в качестве обработчика выступает action .

Код метода init() :

JavaScript

init() { const fromStorage = localStorage.getItem('todo'); if (fromStorage) { document.querySelector('.todo__items').innerHTML = fromStorage; } document.querySelector('.todo__options').addEventListener('change', this.update); document.addEventListener('click', this.action.bind(this)); }

Когда мы указываем в качестве обработчика функцию или метод объекта, то нужно просто передать ссылку, а не вызов.

При указании this.action мы с помощью bind установили в качестве this текущий контекст. Это нужно чтобы мы могли в action() получить объект todo с помощью this .

Метод create() очень простой, он будет просто возвращать HTML код самой задачи с указанным текстом:

JavaScript

save() получает содержимое .todo__items и устанавливает его в localStorage:

JavaScript

save() { localStorage.setItem('todo', document.querySelector('.todo__items').innerHTML); }

update() используется в качестве обработчика:

JavaScript

update() { const option = document.querySelector('.todo__options').value; document.querySelector('.todo__items').dataset.todoOption = option; document.querySelector('.todo__text').disabled = option !== 'active'; }

При вызове устанавливает атрибуту data-todo-option элемента .todo__items значение выбранной опции , а также значение свойству disabled элемента .todo__text :

add() добавляет при нажатии на кнопку задачу в список .todo__items . Для создания HTML-кода задачи используется create() :

JavaScript

add()  document.querySelector('.todo__items').insertAdjacentHTML('beforeend', this.create(elemText.value)); elemText.value = ''; }

action вызывается, когда происходит событие click на документе:

JavaScript

action(e) { const target = e.target; if (target.classList.contains('todo__action')) { const action = target.dataset.todoAction; const elemItem = target.closest('.todo__item'); if (action === 'deleted' && elemItem.dataset.todoState === 'deleted') { elemItem.remove(); } else { elemItem.dataset.todoState = action; } this.save(); } else if (target.classList.contains('todo__add')) { this.add(); this.save(); } }

Параметр 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 выполняется следующий код:

JavaScript

const action = target.dataset.todoAction; const elemItem = target.closest('.todo__item'); if (action === 'deleted' && elemItem.dataset.todoState === 'deleted') { elemItem.remove(); } else { elemItem.dataset.todoState = action; } this.save();

Первое – получаем действие, которое нужно выполнить. Оно у нас находится в атрибуте 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)  if (!Element.prototype.closest)  Element.prototype.closest = function(s) { var el = this; do { if (Element.prototype.matches.call(el, s)) return el; el = el.parentElement  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, а в формате массива объектов:

JavaScript

[ { task: 'Задача 1', state: 'active' }, { task: 'Задача 2', state: 'completed' }, . ];

3. Внести в код возможность сортировки задач посредством перетаскивания (drag и drop).

4. Добавить всплывающие сообщения для информирования пользователя при выполнении действий над задачами.

5. Для любителей jQuery переписать весь код с использованием функций этой библиотеки.

How TO — Create a To Do List

Learn how to create a «to-do list» with CSS and JavaScript.

The To Do List

Use CSS and JavaScript to create a «to-do list» to organize and prioritize your tasks.

Create The To Do List

Step 1) Add HTML:

Example

My To Do List

Step 2) Add CSS:

Style the header and the list:

Example

/* Include the padding and border in an element’s total width and height */
* box-sizing: border-box;
>

/* Remove margins and padding from the list */
ul margin: 0;
padding: 0;
>

/* Style the list items */
ul li cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
transition: 0.2s;

/* make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>

/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) background: #f9f9f9;
>

/* Darker background-color on hover */
ul li:hover background: #ddd;
>

/* When clicked on, add a background color and strike out text */
ul li.checked background: #888;
color: #fff;
text-decoration: line-through;
>

/* Add a «checked» mark when clicked on */
ul li.checked::before content: »;
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
>

/* Style the close button */
.close position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
>

.close:hover background-color: #f44336;
color: white;
>

/* Style the header */
.header background-color: #f44336;
padding: 30px 40px;
color: white;
text-align: center;
>

/* Clear floats after the header */
.header:after content: «»;
display: table;
clear: both;
>

/* Style the input */
input margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
>

/* Style the «Add» button */
.addBtn padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
>

.addBtn:hover background-color: #bbb;
>

Step 3) Add JavaScript:

Example

// Create a «close» button and append it to each list item
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);
>

// Click on a close button to hide the current list item
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»;
>
>

// Add a «checked» symbol when clicking on a list item
var list = document.querySelector(‘ul’);
list.addEventListener(‘click’, function(ev) if (ev.target.tagName === ‘LI’) ev.target.classList.toggle(‘checked’);
>
>, false);

// Create a new list item when clicking on the «Add» button
function newElement() var li = document.createElement(«li»);
var inputValue = document.getElementById(«myInput»).value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === ») alert(«You must write something!»);
> 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»;
>
>
>

Создаём приложение 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.