使用JavaScript class或function创建待办To do 应用

allway2

于 2022-05-25 17:14:19 发布

阅读量345

点赞数

文章标签： javascript elementui vue.js

本文链接：https://blog.csdn.net/allway2/article/details/124969936

版权

HTML(使用JavaScript class或function相同)

<html>
    <head>
        <title>to do application</title>
        <link rel="stylesheet" href="style.css"></link>
        <script src="https://kit.fontawesome.com/8160d6fcce.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="main">
            <div id ="input section">
                <h1>To do list</h1>
                <input type="text"  id ="todo-text"placeholder="Enter the tasks"/>
            </div>
            <div id ="list section">
                <ul id ="todolist_ul">
                </ul>
            </div>
        </div>
        <script src="index.js"></script>

    </body>
</html>

CSS(使用JavaScript class或function相同)

.checked {
    text-decoration: line-through;
}

JS使用JavaScript class

const todolist = []; //declaring a array
const todoListElement = document.querySelector("#todolist_ul");
class todoapplication {//class declaration
    constructor(todoListElement) {//property of class
        this.todoListElement = todoListElement;
        document.querySelector("#todo-text").addEventListener("keydown", (e) => {
            if (e.keyCode == 13) {//key control for shift+enter
                addtasks.addToDo();
            }
        });
    }
    addToDo() {//method1-adding tasks to array
        this.todotext = document.querySelector("#todo-text").value;
        if (this.todotext == "") {//returning function when no task is entered
            return;
        } else {//creating object
            this.todoObject = {
                id: todolist.length,
                todotext: this.todotext,
                isdone: false,
            };
            todolist.unshift(this.todoObject);
            this.displaytodos();//refreshing page
        }
    }
    displaytodos() {//method2-displaying the tasks in html page

        todoListElement.innerHTML = "";
        document.querySelector("#todo-text").value = "";
//render list items inside the ul tag
        todolist.forEach((item) => {
            this.listelement = document.createElement("li");//creating list tags
            this.listelement.innerHTML = item.todotext;
            this.delBtn = document.createElement("i");
            this.delBtn.setAttribute("data-id", item.id);
            this.delBtn.classList.add("fa");//when we have more than one class name
            this.delBtn.classList.add("fa-trash-o");
            if (item.isdone) {//checking whether the the task is done or not
                this.listelement.setAttribute("class", "checked");
            }
            this.listelement.setAttribute("data-id", item.id);//setting attribute
            this.listelement.addEventListener("click", function (e) {
                this.selectedID = e.target.getAttribute("data-id");
                addtasks.doneToDo(this.selectedID);
            });
            this.delBtn.addEventListener("click", function (e) {//adding event to html element
                this.delId = e.target.getAttribute("data-id")
                addtasks.deleteItem(this.delId)
            })
            todoListElement.appendChild(this.listelement);//linking li tag with ul lag
            this.listelement.appendChild(this.delBtn);//linking del id vth li tag
        });
    }
    deleteItem(delId) {//method3-creating fun for deleting elements
        this.deleteindex = todolist.findIndex((item) => item.id == delId)
        todolist.splice(this.deleteindex, 1)
        this.displaytodos();
    }
    doneToDo(selectedID) {//method4-function is used to check whether task is done or not
        this.selectIDindex = todolist.findIndex((item) => item.id == selectedID);
        if (this.selectIDindex == -1) {//when array becomes null
            return;
        } else {
            todolist[this.selectIDindex].isdone ? (todolist[this.selectIDindex].isdone = false)//using ternary operator
                    : (todolist[this.selectIDindex].isdone = true);
            this.displaytodos();
        }
    }
}
const addtasks = new todoapplication(todoListElement)
//document.querySelector("#add_button").addEventListener("click", addToDo); //adding events on html elements
//document.querySelector("#todo-text").addEventListener("keydown", (e) => {
//    if (e.keyCode == 13) {//key control for shift+enter
//        addtasks.addToDo();
//    }
//});

JS使用JavaScript function

const todolist = []; //declaring a array
const todoListElement = document.querySelector("#todolist_ul");
function addToDo() {//method1-adding tasks to array
    todotext = document.querySelector("#todo-text").value;
    if (todotext == "") {//returning function when no task is entered
        return;
    } else {//creating object
        todoObject = {
            id: todolist.length,
            todotext: todotext,
            isdone: false,
        };
        todolist.unshift(todoObject);
        displaytodos(); //refreshing page
    }
}
function displaytodos() {//method2-displaying the tasks in html page

    todoListElement.innerHTML = "";
    document.querySelector("#todo-text").value = "";
//render list items inside the ul tag
    todolist.forEach((item) => {
        listelement = document.createElement("li"); //creating list tags
        listelement.innerHTML = item.todotext;
        delBtn = document.createElement("i");
        delBtn.setAttribute("data-id", item.id);
        delBtn.classList.add("fa"); //when we have more than one class name
        delBtn.classList.add("fa-trash-o");
        if (item.isdone) {//checking whether the the task is done or not
            listelement.setAttribute("class", "checked");
        }
        listelement.setAttribute("data-id", item.id); //setting attribute
        listelement.addEventListener("click", function (e) {
            selectedID = e.target.getAttribute("data-id");
            doneToDo(selectedID);
        });
        delBtn.addEventListener("click", function (e) {//adding event to html element
            delId = e.target.getAttribute("data-id")
            deleteItem(delId)
        })
        todoListElement.appendChild(listelement); //linking li tag with ul lag
        listelement.appendChild(delBtn); //linking del id vth li tag
    });
}
function deleteItem(delId) {//method3-creating fun for deleting elements
    deleteindex = todolist.findIndex((item) => item.id == delId)
    todolist.splice(deleteindex, 1)
    displaytodos();
}
function doneToDo(selectedID) {//method4-function is used to check whether task is done or not
    selectIDindex = todolist.findIndex((item) => item.id == selectedID);
    if (selectIDindex == -1) {//when array becomes null
        return;
    } else {
        todolist[selectIDindex].isdone ? (todolist[selectIDindex].isdone = false)//using ternary operator
                : (todolist[selectIDindex].isdone = true);
        displaytodos();
    }
}

//document.querySelector("#add_button").addEventListener("click", addToDo); //adding events on html elements
document.querySelector("#todo-text").addEventListener("keydown", (e) => {
    if (e.keyCode == 13) {//key control for shift+enter
        addToDo();
    }
});