Лучший способ чему-то научиться - это делать. В этом руководстве мы будем создавать приложение To-Do List с использованием чистого JavaScript. Если вы новичок и устали учиться на скучных теоретических уроках, то вы попали в нужное место, потому что здесь мы практически создадим это приложение To-Do с нуля. Не волнуйтесь, я объяснил каждый шаг по разработке нашего приложения To-do.
В этом приложении мы сможем добавлять новые задачи, которые нужно выполнить, удалять задачи, отмечать задачи после завершения, у нас будет раскрывающееся меню для фильтрации наших задач на основе выполненных или незавершенных задач.
Итак, без промедления приступим к написанию кода.
Нам нужно создать папку и создать в ней три файла:
- index.html
- styles.css
- main.js
HTML-файл для нашего приложения
Поскольку это руководство в основном сосредоточено на обучении концепциям JavaScript, я предполагаю, что вы должны быть знакомы с синтаксисом HTML и легко понимать приведенный выше код, но все же мы кратко обсудим, что происходит в этом файле html.
В теге body нашего файла есть три основных раздела: 1. Заголовок 2. Форма 3. Контейнер задачи и, наконец, мы просто связываем наш файл JavaScript.
Заголовок раздела, как вы уже догадались, содержит название нашего приложения.
В разделе формы у нас есть элемент ввода для ввода новой задачи, кнопка для отображения этой задачи ниже, раскрывающийся список, который фильтрует наши задачи на основе выполненных или незавершенных задач.
В разделе контейнера задач у нас есть все наши задачи, которые динамически добавляются на нашу страницу, когда пользователь добавляет задачу через JavaScript.
CSS-файл для стилизации
Это мой стиль для нашего приложения To-Do List, который вы можете легко понять, просто прочитав один раз, поскольку я также добавил комментарии, определяющие роль кода. Вы также можете придумать свою укладку. И, пожалуйста, отправьте ссылку на свой стиль в разделе комментариев. Я хотел бы увидеть все ваши творческие стили.
Файл JavaScript для функциональности
А вот и захватывающая часть, ради которой вы, ребята, читаете это. Файл JavaScript отвечает за все функции нашего приложения.
1. Сохранение элементов в константах
Сначала давайте сохраним элементы HTML, которые мы будем использовать в различных функциях.
//selectors
const todoInput = document.querySelector('.todo_input');
const todoButton = document.querySelector('.todo_button');
const todoList = document.querySelector('.todo_list');
const filterOption = document.querySelector('.filter_todo');
Здесь с помощью метода document.querySelector () мы сохраняем элементы html с определенным классом для их соответствующих констант. Теперь константы todoInput, todoButton, todoList, filterOption содержат элементы html.
2. Добавление прослушивателей событий к элементам
Теперь мы добавим прослушиватели событий щелчка к нашим кнопкам и раскрывающемуся фильтру.
//event listeners
todoButton.addEventListener("click", addTodo)
todoList.addEventListener("click", deleteCheck)
filterOption.addEventListener("click", filterTodo)
Метод addEventListener() присоединяет обработчик событий к указанному элементу. Теперь, когда мы нажмем кнопку «+» в нашем вводе, будет выполнена функция addTodo. Когда мы щелкнем любую задачу, которая добавлена в контейнер задач нашего приложения, будет выполнена функция deleteCheck. Когда мы щелкнем элемент выбора (раскрывающийся список) в нашем приложении, функция filterTodo выполнит
3. Добавление задачи с кнопкой проверки и кнопкой удаления.
function addTodo(event) {
event.preventDefault();
//todo DIV
const todoDiv = document.createElement('div');
todoDiv.classList.add('todo');
//todo LI
const newTodo = document.createElement('li');
newTodo.innerText = todoInput.value;
newTodo.classList.add('todo_item');
todoDiv.appendChild(newTodo);
if(todoInput.value === ""){
return null;
}
//check mark BUTTON
const completedButton = document.createElement('button');
completedButton.innerHTML = '<i class="fas fa-check"></i>';
completedButton.classList.add('complete_btn')
todoDiv.appendChild(completedButton);
//delete BUTTON
const deleteButton = document.createElement('button');
deleteButton.innerHTML = '<i class="fas fa-trash"></i>';
deleteButton.classList.add('delete_btn')
todoDiv.appendChild(deleteButton);
//Append to Actual LIST
todoList.appendChild(todoDiv);
//Clear todo input VALUE
todoInput.value = ""
}
Эта функция addTodo будет выполняться, когда будет нажата кнопка добавления при вводе. Эта функция отвечает за добавление задачи, добавление кнопки проверки и добавление кнопки удаления.
Во-первых, мы вызываем метод event.preventDefault (), который отменяет событие, если оно может быть отменено. В нашем случае, поскольку наша кнопка добавления имеет тип отправки, когда мы нажимаем на нее, наша страница отправляется и обновляется, и это то, чего мы не хотим в нашем приложении, именно здесь метод event.preventDefault () входит в игру, метод предотвращает его от отправки формы.
Затем с помощью метода document.createElement () мы создаем элемент html ‹div›, который будет содержать задачу, кнопку проверки и удаления. Затем мы создаем html ‹li›, который является нашей реальной задачей, которую мы получаем из todoInput.value, который просто берет все типы пользователей в поле ввода и сохраняет их в этом ‹li› элемент. Аналогичным образом мы создаем кнопки проверки и удаления. Наконец, мы проверяем, не пусто ли наше поле ввода, что означает, что там написана какая-то задача, и если да, мы добавляем наш ‹li› (список) и обе кнопки в ‹ div ›, который мы только что создали.
4. Удаление и проверка задачи соответственно.
//DELETE & CHECK
function deleteCheck(e) {
const item = e.target;
//DELETE ITEM
if (item.classList[0] === "delete_btn") {
const todo = item.parentElement;
//ANIMATION TRANSITION
todo.classList.add("fall")
todo.addEventListener('transitionend', function () {
todo.remove()
})
}
//COMPLETE ITEM
if (item.classList[0] === "complete_btn") {
const todo = item.parentElement;
todo.classList.toggle("completedItem")
}
}
Поскольку мы добавили прослушиватель событий в наш todoList ‹div›, всякий раз, когда мы нажимаем кнопку проверки или удаления, эта функция будет выполняться. Однако при нажатии на задачу в ‹div› также выполняется эта функция, но поскольку мы обрабатываем ситуацию, когда нажимается любая из кнопок, нажатие на задачу ничего не сделает.
В этой функции мы получаем целевой элемент с помощью e.target. Затем мы проверяем, является ли целевой элемент кнопкой удаления или кнопкой проверки. Если это кнопка удаления (delete_btn), то мы просто получаем его родительский элемент со свойством .parentElement и удаляем его с помощью метода .remove () после перехода завершено, которое добавляется добавлением класса «fall» ко всему ‹div›. Если мы нажмем кнопку проверки (complete_btn), тогда мы просто переключаем класс на родительский элемент, которым является сам ‹div›, который применяет к задаче некоторый стиль, чтобы подтвердить, что эта задача завершено.
5. Фильтрация задач по выбранному варианту.
//FILTERING THE TASKS ACCORDING THE OPTION
function filterTodo(e) {
const todos = todoList.childNodes;
for(let i = 1; i<todos.length; i++ ){
switch (e.target.value) {
case "all":
todos[i].style.display = "flex";
break;
case "completed":
if (todos[i].classList.contains('completedItem')) {
todos[i].style.display = "flex";
} else {
todos[i].style.display = "none";
}
break;
case "uncompleted":
if (!todos[i].classList.contains('completedItem')) {
todos[i].style.display = "flex";
} else {
todos[i].style.display = "none";
}
break;
}
}
}
Когда мы щелкаем по одному из вариантов раскрывающегося списка, эта функция filterTodo будет выполняться. Эта функция отвечает за фильтрацию задач по всем задачам, выполненным и незавершенным задачам. В постоянных задачах мы храним все задачи. Затем, используя цикл for, мы перебираем их. В цикле мы проверяем, какая опция выбрана в раскрывающемся списке, и просто фильтруем элементы, реализуя стиль отображения для задач.
Например: - Если вы нажали опцию «Завершено» в раскрывающемся списке, он проверит, какие задачи имеют класс completed_item, и добавит к нему стиль гибкости, в противном случае он добавит к нему стиль отображения none.
todos[i].style.display = "flex";
} else {
todos[i].style.display = "none";
}
Другие параметры фильтруют задачи тем же способом.
Теперь наше приложение отлично работает без каких-либо проблем.
На сегодня все. Надеюсь, это было полезно для парней. Я буду публиковать свои идеи по разным темам, и мы вместе создадим множество крутых приложений.
Добрый день, хорошее кодирование…
Строковые и числовые методы в JavaScript
Методы массивов в JavaScript
