vanilla_使用Vanilla JavaScript为绝对初学者构建待办事项列表应用

vanilla

The best way to learn something is by doing. In this tutorial, we will be building a To-Do List app using pure JavaScript. If you are a beginner and tired of studying from boring theoretical tutorials then you are in a right place because here we will practically build this To-Do app from scratch. Don’t worry I have explained each and every step to develop our To-do app.

学习某事的最好方法是通过做。 在本教程中，我们将使用纯JavaScript构建待办事项列表应用程序。 如果您是初学者，并且厌倦了无聊的理论教程的学习，那么您来对地方了，因为在这里，我们实际上将从头开始构建此To-Do应用。 不用担心，我已经解释了开发待办应用程序的每个步骤。

In this app, we will be able to add new tasks to be done, delete tasks, mark tasks after completion, we will have a drop-down menu to filter our tasks on basis of completed or incomplete tasks.

在此应用中，我们将能够添加要完成的新任务，删除任务，在完成后标记任务，我们将具有一个下拉菜单，可根据已完成或未完成的任务过滤任务。

So without any further delay let’s get started with the coding.

因此，我们没有任何进一步的延迟，让我们开始进行编码。

We have to create a folder and we have to create three files there:

我们必须创建一个文件夹，并在那里创建三个文件：

1. index.html

   index.html

2. styles.css

   styles.css

3. main.js

   main.js

我们应用HTML文件 (HTML file for our app)

HTML File

HTML文件

As this tutorial mainly focuses on teaching JavaScript concepts, I assume that you must be familiar with the HTML syntax and easily understand above code but still we will discuss briefly about what’s happening in this html file.

由于本教程主要侧重于讲授JavaScript概念，因此我假设您必须熟悉HTML语法并易于理解以上代码，但我们仍将简要讨论此html文件中发生的情况。

In body tag of our file we have three main section: 1. Heading 2. Form 3.Task Container and at last we are just linking our JavaScript file.

在文件的主体标签中，我们有三个主要部分： 1.标题2.表单3.Task容器 ，最后我们只是链接我们的JavaScript文件。

Heading section as you already guessed contains title of our app.

您已经猜到的标题部分包含我们应用程序的标题。

In form section, we have an input element to enter a new task, a button to display that task below, a dropdown which filters our tasks on basis of completed or incomplete tasks.

在表单部分，我们有一个输入元素来输入新任务，一个按钮在下面显示该任务，以及一个下拉列表，用于根据已完成或未完成的任务过滤任务。

In task container section we have all our tasks which are added to our page dynamically when user adds a task through JavaScript.

在任务容器部分，我们拥有所有任务，当用户通过JavaScript添加任务时，这些任务会动态添加到页面中。

CSS文件样式 (CSS file for styling)

CSS File

CSS文件

This is my styling for our To-Do List app which you can easily understand by just reading once as I have also added comments specifying the role of the code. You can also come up with your own styling. And please send the link of your styling in comment section. I would love to see all of your creative styling.

这是我的待办事项列表应用程序的样式，您只需阅读一次即可轻松理解，因为我还添加了指定代码作用的注释。 您也可以提出自己的样式。 并在评论部分中发送您的样式链接。 我希望看到您所有的创意样式。

JavaScript文件的功能 (JavaScript file for functionality)

JavaScript File

JavaScript文件

Here comes the exciting part for which you guys are reading this. The JavaScript file is responsible for all the functionality of our app.

这是你们正在阅读的令人兴奋的部分。 JavaScript文件负责我们应用程序的所有功能。

1.以常量存储元素 (1. Storing Elements in constants)

First let’s store html elements which we will use in different functionalities.

首先，让我们存储将在不同功能中使用的html元素。

//selectorsconst todoInput = document.querySelector('.todo_input');const todoButton = document.querySelector('.todo_button');const todoList = document.querySelector('.todo_list');const filterOption = document.querySelector('.filter_todo');

Here, with the help of document.querySelector() method we are storing html elements with specific class to their respective constants. Now constants todoInput, todoButton, todoList, filterOption contains html elements.

在这里，借助于document.querySelector()方法，我们将具有特定类的html元素存储到它们各自的常量。 现在常量todoInput ， todoButton ， todoList ， filterOption包含html元素。

2.将事件监听器添加到元素 (2. Adding Event Listeners to elements)

Now we will add click event listeners to our Buttons and Dropdown Filter.

现在，我们将单击事件侦听器添加到“按钮和下拉过滤器”中。

//event listenerstodoButton.addEventListener("click", addTodo)todoList.addEventListener("click", deleteCheck)filterOption.addEventListener("click", filterTodo)

The addEventListener() method attaches an event handler to the specified element. Now when we will click ‘+’ button element in our input then addTodo function will execute. When we will click any task which is added in task container of our app then deleteCheck function will execute. When we will click select element (dropdown) in our app then filterTodo function will execute

addEventListener()方法将事件处理程序附加到指定的元素。 现在，当我们在输入中单击“ +”按钮元素时，将执行addTodo函数。 当我们单击添加到应用程序任务容器中的任何任务时，将执行deleteCheck函数。 当我们单击应用程序中的select元素(下拉列表)时，filterTodo函数将执行

3.使用复选按钮和删除按钮添加任务 (3. Adding a Task with check button and delete button)

function addTodo(event) {event.preventDefault();//todo DIVconst todoDiv = document.createElement('div');todoDiv.classList.add('todo');//todo LIconst newTodo = document.createElement('li');newTodo.innerText = todoInput.value;newTodo.classList.add('todo_item');todoDiv.appendChild(newTodo);if(todoInput.value === ""){return null;}//check mark BUTTONconst completedButton = document.createElement('button');completedButton.innerHTML = '<i class="fas fa-check"></i>';completedButton.classList.add('complete_btn')todoDiv.appendChild(completedButton);//delete BUTTONconst deleteButton = document.createElement('button');deleteButton.innerHTML = '<i class="fas fa-trash"></i>';deleteButton.classList.add('delete_btn')todoDiv.appendChild(deleteButton);//Append to Actual LISTtodoList.appendChild(todoDiv);//Clear todo input VALUEtodoInput.value = ""}

This addTodo function will execute when the add button on input will be clicked. This function is responsible for adding a task, adding check button and adding delete button.

单击输入上的添加按钮时，将执行此addTodo函数。 该功能负责添加任务，添加检查按钮和添加删除按钮。

Firstly, we are calling event.preventDefault() method which cancels the event if it is cancelable. In our case as our add button is of submit type, when we click on this our page gets submitted and get refreshed and that’s something we don’t want in our application that is where event.preventDefault() method comes into play method prevent it from submitting the form.

首先，我们调用event.preventDefault()方法，该方法将取消可取消的事件。 在我们的例子中，因为我们的添加按钮是提交类型，所以当我们单击该页面时，页面将被提交并刷新，而这在我们的应用程序中是不希望的，因为event.preventDefault()方法会在其中发挥作用，方法会阻止它从提交表格。

Then with the help of document.createElement() method we are creating a html <div> element which will contain the task, check and delete button. Next we are creating html <li> which is our actual task which we are getting from todoInput.value which just takes whatever user types in input field and stores it in this <li> element. In the similar way we are creating both check and delete buttons. At last we are checking if our input field is not empty which means there is some task written there and if so, we are append our <li> (list) and both buttons in the <div> element we just created.

然后，借助document.createElement()方法，我们将创建一个html <div>元素，其中将包含任务，检查和删除按钮。 接下来，我们创建html <li> ，这是我们从todoInput.value获得的实际任务，该任务只将输入字段中的任何用户类型存储在此<li>元素中。 我们以类似的方式创建检查和删除按钮。 最后，我们要检查输入字段是否为空，这意味着那里写了一些任务，如果是，则将我们的<li> (列表)和两个按钮都添加到刚刚创建的<div>元素中。

4.相应地删除并检查任务 (4. Deleting and checking the task accordingly)

//DELETE & CHECKfunction deleteCheck(e) {const item = e.target;//DELETE ITEMif (item.classList[0] === "delete_btn") {const todo = item.parentElement;//ANIMATION TRANSITIONtodo.classList.add("fall")todo.addEventListener('transitionend', function () {todo.remove()})}//COMPLETE ITEMif (item.classList[0] === "complete_btn") {const todo = item.parentElement;todo.classList.toggle("completedItem")}}

As we have added an event listener on our todoList <div>, whenever we will click on check or delete button this function will execute. However on clicking the task itself in the <div> also execute this function but as we are handling the situation when either of any button is clicked so clicking the task will not do anything.

当我们在todoList <div>上添加了一个事件侦听器时， 只要我们单击“检查”或“删除”按钮，该功能就会执行。 但是，在<div>中单击任务本身时，也要执行此功能，但是由于我们正在处理单击任何一个按钮中的任何一个的情况，因此单击任务将不会执行任何操作。

In this function we are getting the target element using e.target. Then we are checking if the target element is delete button or check button. If it is delete button(delete_btn) then we are simply getting its parent element with .parentElement property and deleting it with the help of .remove() method after the transition is completed which is added by adding ‘fall’ class to the whole <div>. If we clcik on check button (complete_btn) then we are just toggling a class to the parent element that is <div> itself which will apply some styling to the task to confirm that this task is completed.

在此函数中，我们使用e.target获取目标元素。 然后我们检查目标元素是删除按钮还是检查按钮。 如果它是删除按钮(delete_btn)，那么我们只需使用.parentElement属性获取其父元素，并在转换完成后借助.remove()方法将其删除，方法是将' fall'类添加到整个< div>。 如果我们单击检查按钮(complete_btn)，那么我们只是将一个类切换到父元素本身就是<div> ，它将对任务应用某种样式以确认此任务已完成。

5.根据所选选项过滤任务 (5. Filtering the tasks according to the selected option)

//FILTERING THE TASKS ACCORDING THE OPTIONfunction 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;}}}

When we click one of the options of dropdown then this filterTodo function will execute. This function is responsible for filtering the tasks on the basis of all tasks, completed and uncompleted tasks. In constant todos we are storing all the todo tasks. Then using for loop we are iterating over them . In the loop we are checking which option is clicked from the dropdown and just filtering the elements by implementing the display style to the todos.

当我们单击下拉选项之一时，此filterTodo函数将执行。 此功能负责根据所有任务，已完成和未完成的任务过滤任务。 在不断的待办事项 ，我们存储所有的待办事项任务。 然后使用for循环对它们进行迭代。 在循环中，我们检查从下拉列表中单击了哪个选项，并通过将显示样式实现为待办事项来过滤元素。

For example:- If you clicked completed option of the dropdown then it will check which todos have class of completed_item and add a style of flex to it otherwise it will add style of display none to it.

例如：-如果单击下拉菜单的完成选项，则它将检查哪些待办事项具有completed_item类，并向其添加伸缩样式，否则将不显示任何样式。

todos[i].style.display = "flex";} else {todos[i].style.display = "none";}

Other options filter the todos by the same method.

其他选项通过相同的方法过滤待办事项。

Now our application is working great without any problem.

现在，我们的应用程序运行良好，没有任何问题。

That is all for today. I hope this was helpful for guys. I will be posting my ideas on various topics and we will build many cool apps together.

今天就这些。 我希望这对大家有帮助。 我将在各种主题上发表我的想法，我们将一起构建许多很棒的应用程序。

Good Day, Good Coding…

美好的一天，良好的编码...

翻译自: https://medium.com/@suryashakti1999/to-do-list-app-using-javascript-for-absolute-beginners-13ea9e38a033

vanilla