Я изучаю JavaScript уже 3-4 недели здесь, в AltCampus. Мой путь до сих пор заставил меня изучить такие темы, как строковые методы, методы массивов и т. Д. В Javascript, и теперь я перехожу на объектную модель документа. DOM - это объектно-ориентированное представление веб-страницы, которое можно изменять с помощью языка сценариев, например JavaScript.

Что такое приложение To-Do?

Приложение To-Do в основном дает нам возможность систематизировать наши ежедневные задачи. Как правило, функции To-Do Application включают в себя:

Сначала нужно добавить To-Do, а затем вы можете отмечать и снимать отметки с тех задач, которые были выполнены или не выполнены. Кроме того, он показывает, сколько задач ожидает выполнения, и вы можете видеть завершенные и активные задачи.

Здесь Задача 1 и Задача 3 не отмечены, а Задача 2 отмечена. Таким образом, это показывает, что 2 пункта еще предстоит сделать. Теперь посмотрим, как работает приложение.

Первый шаг. Создайте общую структуру веб-страницы с помощью HTML и CSS. Есть тег input для ввода Todo, тег p и четыре кнопки в конце для различных функций. Добавьте базовый стиль к различным элементам, и мы готовы продолжить нашу структуру.

Второй шаг. Теперь, когда структура сформирована, у нас есть возможность динамически добавлять задачу. Каждый раз, когда мы вводим какое-то задание, оно должно появляться в приложении вместе с флажком и удалять знак вокруг него. Поэтому мы добавляем прослушиватель событий в поле ввода, и всякий раз, когда мы нажимаем кнопку «Enter», он должен добавляться как элемент списка в неупорядоченный список задач. Для этого мы должны динамически создавать различные элементы для каждого события нажатия клавиши «Enter». Посмотрим код. Здесь мы выбираем все элементы

Третий шаг. На предыдущем снимке экрана мы вызываем функцию createUI, которая по сути динамически создает элементы списка с использованием наших данных, то есть массива объектов, который является нашим единственным источником истины. Теперь давайте посмотрим, как мы создали функцию createUI.

Четвертый шаг. Теперь мы закончили добавление задач в ul. Каждый раз, когда мы набираем задачу и нажимаем клавишу ВВОД, этот элемент списка создается динамически и добавляется в ul. Кроме того, мы должны добавить две функции в каждый элемент списка, то есть Toggle и Delete. Кроме того, для этого нам нужно убедиться, что это должно быть отражено в том же элементе списка, по которому мы щелкнули. Итак, мы установили атрибут для каждого элемента списка, чтобы каждый элемент списка имел уникальный uid. Давайте обсудим это:

a.) Переключить: всякий раз, когда мы нажимаем на флажок, это также должно отражаться в нашем единственном источнике истины, то есть данных (массив объектов). Поэтому мы добавили прослушиватель событий для флажка типа ввода. Используя уникальный uid, мы будем переключать тот же элемент списка, на котором щелкаем.

б) Удалить: всякий раз, когда мы нажимаем на элемент диапазона «X», этот элемент должен быть удален из неупорядоченного списка. Итак, мы добавили прослушиватель событий в элемент span. Используя уникальный uid, мы удалим тот же элемент списка, по которому щелкнули.

Пятый шаг. Теперь давайте перейдем к обсуждению функций четырех кнопок внизу: показать, активен, завершен, очистить завершено. Мы можем добавить больше функций в соответствии с нашими потребностями. Давайте посмотрим, что это за функции на самом деле:

a.) Осталось элементов: этот тег динамически показывает количество ожидающих задач.

б) Все: эта кнопка показывает все активные и незавершенные задачи.

c.) Активно: эта кнопка показывает все активные задачи.

г) Завершено: эта кнопка показывает все выполненные задачи.

д.) Очистить завершено: эта кнопка очищает завершенные задачи.

Теперь давайте добавим прослушиватели событий к каждой из этих кнопок, которые будут запускаться всякий раз, когда мы нажимаем на них, в то время как Items left просто выводит количество ожидающих задач.

Теперь давайте определим эти функции, данные в слушателях событий.

Здесь мы используем метод массива фильтров, чтобы отфильтровать элементы, которые являются активными, завершенными. В этих двух функциях мы не изменяем единственный источник истины, то есть данные, в то время как в clearcompleted () мы должны очищать выполненные задачи, поэтому мы изменяем наш единственный источник истины, то есть данные.

На этом приложение To-do завершено. Очевидно, вы можете добавить в него больше функций в соответствии с вашими требованиями. Также вы можете перейти по этой ссылке, если хотите оформить заказ https://github.com/ashish-shm/todo-app.

Удачного кодирования :)