Всем привет! В этой статье мы рассмотрим создание простого todo-list приложения (список дел). Создание такого рода приложений будет полезно новичкам, так как вы сможете закрепить на практике свои знания или узнать что-то новое. Приложение мы будем писать на чистом javaScript, html и библиотеке bootstrap, чтобы не отвлекаться на стили. Начнем!
Что у нас получится в итоге?
Приложение будет выглядеть следующим образом:
У нас будет несколько страниц с разными списками дел. На каждой странице будет название списка, поле для добавления дела и сам список дел. Будет возможность отметить задачу готовой и удалить задачу. Задачи будут сохраняться даже при закрытии приложения.
Создание страниц и навигации.
Для начала мы создадим несколько html документов для каждого члена семьи и добавим навигацию между ними.
Мы создали три html документа и один js файл. Его мы пока не трогаем. В наших остальных файлах добавляем код как на картинке выше. Мы добавили блок container, в котором у нас наша навигация. Блок ниже с классом container будет оберткой для нашего списка. Для стилизации мы используем bootstrap, поэтому нужно подключить его. Остальное мы добавим с помощью js.
Подключение bootstrap:
Скопируйте этот тег и вставьте его в между <head></head>. Готово!
Создание функциональности приложения.
Функция-обертка.
Сейчас мы напишем js код, который будет создавать наш список дел. Для начала в файле index.js создадим самовыполняющуюся функцию:
Функция, создающая название списка.
Раз у нас будет несколько страниц для каждого члена семьи, нужно сделать функцию, которая принимает текст и возвращает подзаголовок с этим текстом:
Функция, создающая форму с вводом.
Отлично! Теперь мы добавим функцию createForm, которая будет создавать форму с полем для ввода и кнопкой 'Добавить дело':
Функция создает форму, инпут, обертку для кнопки и кнопку. Добавляет классы для них и placeholder для нашего инпута. Далее мы добавляем текст в кнопку, а кнопку вставляем в обертку. Теперь добавляем наш инпут и блок с кнопкой в форму и возвращаем данные.
Функции создания списка и элементов списка.
CreateTodoList создает список, добавляет к нему класс и возвращает его.
Функция createItem принимает название задачи и выполненность. Создаем элемент списка, блок для наших кнопок и сами кнопки, соответственно. Далее мы добавляем для нашего элемента классы, советую просто переписывать их, так как тут главное - функциональность. Теперь добавляем в элемент название, которое мы принимаем как аргумент и проверяем выполнена ли наша задача. Если она выполнена, то добавляем для элемента класс, с помощью которого наш элемент будет зеленым. Стилизуем кнопки и добавляем в них текст, после этого вкладываем кнопки в блок, а блок в наш элемент. Возвращаем результат.
Главная функция.
Создаем функцию createTodo, которая принимает контейнер, где и будет наше приложение, название, массив с делами и ключ нашего массива, то есть мы как бы скажем чей это список дел. Теперь создаем название, форму и список, с помощью созданных функций и добавляем их в container.
Далее мы проверяем наш массив дел. Если он не пустой, то с помощью map, мы для каждого элемента создаем item и на кнопки добавляем слушатели событий, которые реагируют на клик. Если мы нажимаем на кнопку 'Готово', то класс у нашего элемента меняется, далее мы ищем индекс нашего элемента в массиве дел и если этот элемент был выполнен, то ему присваивается false и наоборот, обновляем наш localStorage, с помощью функции, которую рассмотрим позже.
При нажатии на кнопку удалить, высветится окно с вопросом и если мы подтверждаем, то ищем индекс этого элемента, удаляем его из массива, обновляем localStorage и удаляем этот элемент.
После добавления обработчиков событий добавляем наш item в список.
Добавление слушателя события 'submit':
Как и говорил ранее, создаем функцию для обновления localStorage, она принимает ключ и данные, которые нужно сохранить.
Добавляем слушатель на нашу форму. Если мы нажмем на Enter или на кнопку, то сработает этот слушатель. В нем мы отключаем действия браузера по умолчанию и проверяем наш инпут. Если он пустой, то просто делаем return. Если все в порядке, то создаем новый элемент с значением нашего инпута. Добавляем слушатели событий на кнопки элемента. Это мы уже делали, поэтому не буду заново объяснять. Теперь в наш массив дел добавляем объект с ключами name и done. Обновляем localStorage, добавляем элемент в список, обновляем значение инпута на пустую строку и делаем кнопку нерабочей.
Слушатель на input.
Последний слушатель в нашей главной функции. Он срабатывает при вводе данных в инпут и если инпут не пустой, то делает кнопку активной.
Теперь создаем глобальную переменную createTodo и передаем туда нашу главную функцию.
Возвращаемся к нашим html документам.
Добавляем наш скрипт в <head> и добавляем еще один скрипт)
В наш следующий скрипт мы добавляем слушатель, который сработает при загрузке DOM. Что произойдет при выполнении? Мы проверим есть ли в localStorage список дел и если есть, то добавим этот список в массив items и вызовем нашу функцию createTodo, в которую мы передаем наш элемент app-todo как контейнер, 'Мои дела' как название, items как список дел и 'my-todo' как ключ. Для других страниц все то же самое, только нужно поменять ключ и название. Пример:
Конец.
Вот и все. Вот такой получился простой todo-list на javaScript. Ставьте лайки и подписывайтесь на наш блог, чтобы не пропускать новые выпуски. Пишите в комментариях, если хотите новую статью, где мы будем улучшать это приложение и добавлять новые функции.