Как создать простое приложение со списком дел с помощью JavaScript
Объектная модель документа (DOM) – это представление данных объектов, составляющих структуру и содержимое веб-страницы. Вы можете получить доступ ко всем элементам DOM на веб-сайте и динамически создавать, читать, обновлять и удалять (CRUD) их с помощью JavaScript.
В этой статье объясняется, как выполнять операции CRUD со списком дел, используя JavaScript и манипуляции с DOM. Мы ожидаем, что вы познакомитесь с основами HTML и JavaScript, прежде чем читать эту статью.
Понимание основных манипуляций с DOM
Рассмотрим простой пример:
<button id=”submit”>Submit</button>
<script>
const submitButton = document.getElementById(“submit”);
submitButton.addEventListener(“click”, ()=>{
alert(“The form has been submitted”);
});
</script>
Переменная submitButton имеет доступ к кнопке HTML в приведенном выше коде. Вы должны добавить прослушиватель событий щелчка на кнопку (получив элемент по его идентификатору отправки ). При нажатии кнопки запускается событие, и в окне отображается всплывающее окно с текстом: «Форма отправлена».
Теперь, когда мы рассмотрели основную идею манипуляции с DOM , давайте продолжим и погрузимся в создание приложения to-do.
Создание макета с использованием HTML и TailwindCSS
Давайте посмотрим на HTML-макет этого проекта. Элементы ввода и кнопки имеют соответствующие идентификаторы, чтобы получить доступ к этим элементам в файле JavaScript.
Для дизайна внешнего интерфейса в этой статье используется служебный CSS-фреймворк TailwindCSS . Вы можете использовать TailwindCSS в своем проекте, импортировав файл CSS из CDN.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
Код:
<div class="h-100 w-full flex items-center justify-center bg-teal-lightest font-sans mt-20">
<div class="bg-white rounded shadow p-6 m-4 w-full lg:w-3/4 lg:max-w-lg">
<div class="mb-4">
<h1 class="text-3xl md:text-4xl text-indigo-600 font-medium mb-2">
To-Do List App
</h1>
<div class="flex mt-4">
<input class="shadow appearance-none border rounded w-full py-2 px-3 mr-4 text-grey-darker" name="text" id="text" placeholder="Add Todo" />
<input type="hidden" id="saveIndex" />
<button class="p-2 lg:px-4 md:mx-2 text-center border border-solid border-indigo-600 rounded text-white bg-indigo-600 transition-colors duration-300 mt-1 md:mt-0 md:ml-1" id="add-task-btn">Add</button>
<button class="p-2 lg:px-4 md:mx-2 text-center border border-solid border-indigo-600 rounded bg-indigo-600 text-white transition-colors duration-300 mt-1 md:mt-0 md:ml-1" style="display: none" id="save-todo-btn">Edit Todo</button>
</div>
</div>
<div id="listBox"></div>
</div>
</div>
Вот как выглядит наше приложение после проектирования:
Добавление функциональности с помощью Javascript:
Первый шаг – получение доступа к элементам по их идентификаторам с помощью метода getElementById () .
const text = document.getElementById("text");
const addTaskButton = document.getElementById("add-task-btn");
const saveTaskButton = document.getElementById("save-todo-btn");
const listBox = document.getElementById("listBox");
const saveInd = document.getElementById("saveIndex");
Нам нужен массив для хранения всех текущих задач. Следовательно, нам нужно инициализировать один.
let todoArray = [];
Добавление пунктов в список дел
Чтобы добавить задачу в массив, вам нужно отправить ее в todoArray, а затем отобразить на веб-странице. Чтобы это произошло, на кнопке добавления должно быть инициировано событие щелчка.
addTaskButton.addEventListener("click", (e) => {
e.preventDefault();
let todo = localStorage.getItem("todo");
if (todo === null) {
todoArray = [];
} else {
todoArray = JSON.parse(todo);
}
todoArray.push(text.value);
text.value = "";
localStorage.setItem("todo", JSON.stringify(todoArray));
displayTodo();
});
Вы должны сохранять todoArray в localStorage при каждом изменении (то есть при добавлении, обновлении или удалении задачи).
В приведенном выше коде вы должны получить массив из localStorage ; если массива не существует, мы создаем пустой. Затем мы помещаем только что добавленную задачу в todoArray и снова сохраняем весь массив в localStorage .
Отображение изменений в списке дел
После добавления значения в todoArray его необходимо отобразить на веб-странице. Это делается с помощью атрибута .innerHTML .
Мы помещаем HTML- код списка дел в переменную с именем htmlCode . Затем мы перебираем todoArray и добавляем каждый элемент в переменную htmlCode .
Когда вы закончите перебирать все элементы, вам нужно назначить весь HTML-код элементу listBox с помощью атрибута .innerHTML .
Итак, после помещения нового элемента списка дел в массив, мы вызываем функцию displayTodo (), которая обрабатывает все это, как описано:
function displayTodo() {
let todo = localStorage.getItem("todo");
if (todo === null) {
todoArray = [];
} else {
todoArray = JSON.parse(todo);
}
let htmlCode = "";
todoArray.forEach((list, ind) => {
htmlCode += `<div class='flex mb-4 items-center'>
<p class='w-full text-grey-darkest'>${list}</p>
<button onclick='edit(${ind})' class='flex-no-shrink p-2 ml-4 mr-2 border-2 rounded text-white text-grey bg-green-600'>Edit</button>
<button onclick='deleteTodo(${ind})' class='flex-no-shrink p-2 ml-2 border-2 rounded text-white bg-red-500'>Delete</button>
</div>`;
});
listBox.innerHTML = htmlCode;
}
Вы должны добавить две кнопки – обновить и удалить – для каждого элемента, добавляя элементы списка к переменной htmlCode .
Удаление элементов из списка дел
Кнопка удаления имеет метод атрибута onclick (), который передает индекс задачи в качестве параметра. При нажатии на кнопку удаления будет выполнен метод deleteTodo () .
В этом методе вы должны применить метод массива splice () к todoArray . Метод splice () помогает удалить элемент по указанному индексу. После удаления элемента вы должны сохранить изменения в localStorage и вызвать функцию displayTodo (), чтобы отразить изменения на веб-странице.
function deleteTodo(ind) {
let todo = localStorage.getItem("todo");
todoArray = JSON.parse(todo);
todoArray.splice(ind, 1);
localStorage.setItem("todo", JSON.stringify(todoArray));
displayTodo();
}
Обновление пунктов в списке дел
У каждого элемента списка дел есть кнопка редактирования, как и у кнопки удаления. Кнопка редактирования имеет атрибутный метод onclick () . При нажатии кнопки запускается метод редактирования, который передает индекс в качестве параметра.
Есть два элемента HTML, для которых установлено значение none:
- Элемент ввода с идентификатором saveIndex
- Кнопка с идентификатором save-task-btn
Как только вы нажмете кнопку редактирования, вход будет иметь текстовое значение, которое вы хотите обновить. Вместо addTaskButton будет отображаться saveTaskButton .
Код HTML состоит из элемента ввода с идентификатором saveIndex . Вы должны установить его свойство стиля по умолчанию для отображения как none . Когда вызывается метод редактирования, вы устанавливаете для атрибута value этого элемента значение id, чтобы вы могли ссылаться на него позже при сохранении обновленной задачи.
function edit(ind) {
saveInd.value = ind;
let todo = localStorage.getItem("todo");
todoArray = JSON.parse(todo);
text.value = todoArray[ind];
addTaskButton.style.display = "none";
saveTaskButton.style.display = "block";
}
Закончив редактирование текста, вы нажимаете кнопку saveTaskButton . Нажав кнопку, вы получите идентификатор текста с помощью ввода saveInd . После получения идентификатора вы можете обновить todoArray по этому индексу и отправить изменения в localStorage . Наконец, мы вызвали функцию displayTodo (), чтобы отразить изменения на веб-странице.
saveTaskButton.addEventListener("click", () => {
let todo = localStorage.getItem("todo");
todoArray = JSON.parse(todo);
let id = saveInd.value;
todoArray[id] = text.value;
addTaskButton.style.display = "block";
saveTaskButton.style.display = "none";
text.value = "";
localStorage.setItem("todo", JSON.stringify(todoArray));
displayTodo();
});
Отметьте один пункт из вашего списка дел
Теперь, когда вы завершили базовое приложение со списком дел, пришло время самому приступить к созданию более интересных проектов!
Вы можете создать игру или веб-приложение, которое можно использовать в личных целях. Создание проектов поможет вам развить свои навыки и хорошо освоить JavaScript. Продолжайте учиться и создавать потрясающие проекты как можно больше.
Хотите создать еще один проект JavaScript? Вот простое веб-приложение калькулятора, которое вы можете создать с помощью HTML, CSS и JavaScript.