原生JS实现todo-list小项目

以你之姓@ 2023-06-28 08:53 10阅读 0赞

# 原生JS实现todo-list小项目 #

该项目旨在练习和巩固JS的相应知识点，功能有但不仅限于基本DOM操作，事件触发，数据基本处理等。

功能及界面参考：[https://nourabusoud.github.io/vue-todo-list/][https_nourabusoud.github.io_vue-todo-list]

项目地址：[https://github.com/Miever1/todo-list-js][https_github.com_Miever1_todo-list-js]

基本效果如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg_size_16_color_FFFFFF_t_70][]

## 具体功能实现 ##

数据存储没有用到浏览器存储，而是运用setInterval()函数。

### html： ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Todo list - Miever</title>
        <link rel="icon" href="images/favicon.png">
        <link rel="stylesheet" href="./node_modules/normalize.css/normalize.css">
        <link rel="stylesheet" href="./css/index.css">
        <link rel="stylesheet" href="./css/fonts.css">
    </head>
    
    <body>
        <div id='app'>
            <h1>Daily To-Do list manager</h1>
            <div class="todo-warpper">
                <h2>
                    <span id="getDay">1</span><br>
                    <span id="getDate">2</span>
                </h2>
                <div class="info-box">
                    <input id="input-todo" type="text" placeholder="Take the garbage out">
                    <button id="btn-add">+</button>
                </div>
                <div>
                    <p class="status-free">
                        <img src="./images/beer celebration.svg" alt="">
                        Time to chill! You have no todos.
                    </p>
                </div>
                <div>
                    <p class="status-busy"></p>
                    <ul class="todo-list" id="todolist"></ul>
                </div>
                <div>
                    <p class="status"></p>
                    <ul class="todo-list archived" id="archived"></ul>
                </div>
                <div class="control-buttons">
                    <span id="showComplete-btn">Show Complete</span>
                    <span id="clear-btn">Clear All</span>
                </div>
            </div>
            <footer>
                <div class="github-links">
                    <a href="https://github.com/Miever1"><i class="icon-github"></i><span>Follow @miever1</span></a>
                    <a href="https://github.com/Miever1/todo-list"><i class="icon-star-full"></i><span>Star</span></a>
                </div>
            </footer>
        </div>
        <script src="./js/index.js"></script>
    </body>
    
    </html>

### css： ###

body {
      background: linear-gradient(#fc6c48 0%, #ef5081 100%);
      min-height: 100vh;
      padding: 0 20px;
      font-family: "Open Sans", sans-serif;
      color: #444;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 0;
    }
    
    ul {
      padding: 0;
    }
    
    li {
      list-style: none;
    }
    
    h1 {
      text-align: center;
      color: #fff;
      font-size: 30px;
    }
    
    #app {
      padding-top: 70px;
    }
    
    .todo-warpper {
      width: 400px;
      min-height: 500px;
      margin: 40px auto;
      background-color: #f4f7fc;
      padding: 40px 20px;
      border-radius: 6px;
      position: relative;
      box-sizing: border-box;
    }
    
    h2 {
      margin: 15px 0;
      font-size: 1.2em;
      font-weight: normal;
    }
    
    h2 span {
      color: #f65c65;
      font-weight: normal;
    }
    
    .info-box {
      padding: 15px 0;
      height: 42px;
    }
    
    .info-box input {
      width: 68%;
      height: 36px;
      border-radius: 4px;
      border: 1px solid #ddd;
      padding: 2px 16px;
      font-size: 16px;
      transition: all 0.5s;
    }
    
    .info-box input:focus {
      border-color: #a3b1ff;
      transition: all 0.5s;
    }
    
    .info-box input::-webkit-input-placeholder {
      color: #444;
    }
    
    .info-box input::-moz-placeholder {
      color: rgba(0, 0, 0, 0.3);
      font-style: italic;
    }
    
    #btn-add {
      width: 18%;
      height: 40px;
      margin-left: 2%;
      background-color: #ddd;
      border: none;
      border-radius: 3px;
      color: #fefefe;
      font-size: 32px;
      vertical-align: top;
      font-weight: 600;
    }
    
    .active {
      background-color: #6664ff !important;
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
    }
    
    .status-free {
      margin: 0;
      padding: 40px 0;
      text-align: center;
      font-weight: bold;
      display: none;
    }
    
    .status-free img {
      display: block;
      margin: 10px auto;
      width: 50px;
    }
    
    .todo-list li {
      height: 44px;
      padding: 12px;
      background-color: #e0e8f5;
      box-sizing: border-box;
      position: relative;
      margin: 10px 0;
      border-radius: 3px;
    }
    
    .todo-list li span {
      vertical-align: top;
      display: inline-block;
      height: 20px;
      line-height: 20px;
    }
    
    .todo-list input[type="checkbox"] {
      display: none;
    }
    
    .todo-list input[type="checkbox"] + label {
      position: absolute;
      cursor: pointer;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 22px;
      height: 22px;
      border-radius: 2px;
      border: 1px solid #cfdcec;
      background-color: #fff;
    }
    
    .todo-list input[type="checkbox"]:checked + label::after {
      position: absolute;
      content: "";
      top: 30%;
      left: 50%;
      height: 3px;
      width: 6px;
      border: solid #fc6c48;
      border-top-width: medium;
      border-right-width: medium;
      border-bottom-width: medium;
      border-left-width: medium;
      border-width: 0 0 2px 2px;
      transform-origin: center center;
      transform: rotate(-45deg) translate(-50%, -50%);
    }
    
    .todo-list li span:first-of-type {
      margin-left: 32px;
    }
    
    .todo-list li span:last-child {
      width: 0px;
      height: 44px;
      line-height: 44px;
      position: absolute;
      top: 0;
      right: 0;
      text-align: center;
      background-color: #f56468;
      overflow: hidden;
      border-radius: 0 3px 3px 0;
    }
    
    .delete {
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
    }
    
    .todo-list li:hover .delete {
      width: 44px;
      transition: width 0.5s;
      -webkit-transition: width 0.5s;
    }
    
    .delete i {
      color: #ddd;
    }
    
    .control-buttons {
      width: 360px;
      box-sizing: border-box;
      margin: 28px 0;
      position: absolute;
      bottom: 0;
      left: 20px;
      text-align: center;
    }
    
    .control-buttons span {
      margin-right: 10px;
      padding: 6px 0;
      font-weight: bold;
      cursor: pointer;
      position: relative;
    }
    
    .control-buttons span::after {
      position: absolute;
      content: "";
      width: 0;
      height: 3px;
      background-color: #f4586e;
      transition: all 0.25s;
      left: 0;
      bottom: 0;
      -webkit-transition: all 0.25s;
    }
    
    .control-buttons span:hover::after {
      width: 100%;
    }
    
    footer {
      text-align: center;
    }
    
    .github-links a {
      display: inline-block;
      height: 12px;
      line-height: 12px;
      background-color: #f7f9fb;
      color: #000;
      font-size: 12px;
      cursor: pointer;
      border-radius: 3px;
      padding: 4px 0;
      border: 1px solid rgba(27, 31, 35, 0.35);
    }
    
    .github-links a i {
      margin: 0 4px;
    }
    
    .github-links a span {
      margin-right: 4px;
    }
    
    .archived li {
      background-color: #fff;
      color: #888;
    }
    
    .archived span:first-of-type {
      text-decoration: line-through;
    }
    
    .checkbox {
      display: none;
    }
    
    #archived {
      display: none;
    }
    
    .status {
      display: none;
    }

### javascript: ###

//getElement packaging
    function $(parameter) {
        if (parameter[0] === '.') {
            parameter = parameter.slice(1);
            let getItem = document.getElementsByClassName(parameter);
            return getItem;
        }
        else if (parameter[0] === '#') {
            parameter = parameter.slice(1);
            let getItem = document.getElementById(parameter);
            return getItem;
        }
    }
    
    //get time
    function getTime() {
        let time = new Date();
        let localDate = time.toLocaleDateString().replace(/\//g, "-");
        let day = time.getDay();
        switch (day) {
            case 0:
                day = "Sunday";
                break;
            case 1:
                day = "Monday";
            case 2:
                day = "Tuesday";
                break;
            case 3:
                day = "Wednesday";
                break;
            case 4:
                day = "Thursday";
                break;
            case 5:
                day = "Friday";
                break;
            case 6:
                day = "Saturday";
                break;
        }
        let result = [localDate, day];
        return result;
    }
    
    //setting time
    function settingTime() {
        let time = getTime();
        let dayShow = $("#getDay");
        let dateShow = $("#getDate");
        dateShow.innerHTML = time[0];
        dayShow.innerHTML = time[1];
    }
    
    //todolist added
    let idNum = 0;
    $("#btn-add").onclick = function () {
        $(".status-free")[0].style.display = "none";
        let msg = $("#input-todo").value;
        let childLi = document.createElement("li");
        let choiceSpan = document.createElement("input");
        let choiceLable = document.createElement("label");
        let textSpan = document.createElement("span");
        let deleteSpan = document.createElement("span");
        let del_icon = document.createElement("i");
        let itemId = "item" + idNum;
        idNum++;
        childLi.setAttribute("id", itemId);
        choiceSpan.setAttribute("type", "checkbox");
        textSpan.className = "todo-text";
        deleteSpan.className = "delete";
        deleteSpan.setAttribute("id", itemId + "-del");
        choiceSpan.setAttribute("id", itemId + "_check");
        choiceLable.setAttribute("for", itemId + "_check");
        textSpan.innerHTML = msg;
        del_icon.className = "icon-bin2";
        deleteSpan.appendChild(del_icon);
        childLi.appendChild(choiceSpan);
        childLi.appendChild(choiceLable);
        childLi.appendChild(textSpan);
        childLi.appendChild(deleteSpan);
        $(".todo-list")[0].appendChild(childLi);
        $("#input-todo").value = "";
        //delete evevt listener
        deleteSpan.addEventListener('click', function () {
            let deleteId = this.id.replace('-del', '');
            let delItem = $("#" + deleteId);
            delItem.parentNode.removeChild(delItem);
        })
        //archived item listener
        choiceSpan.addEventListener('click', function () {
            let archivedId = choiceSpan.parentNode.id;
            let archivedItem = $("#" + archivedId);
            if (choiceSpan.checked == true) {
                $("#archived").appendChild(archivedItem);
            }
            else {
                $("#todolist").appendChild(archivedItem);
            }
        })
    }
    
    function checkItem() {
        let list_length = $(".todo-list")[0].getElementsByTagName("li").length;
        let archivedItem_length = $("#archived").getElementsByTagName("li").length;
        let inputValue = $("#input-todo");
        //check whether the added input is active
        if (inputValue.value.length == 0) {
            $("#btn-add").disabled = true;
            $("#btn-add").className = "";
        }
        else {
            $("#btn-add").disabled = false;
            $("#btn-add").className = "active";
        }
        //check whether the todolist is blank
        if (list_length == 0) {
            $(".status-free")[0].style.display = "block";
            $(".status-busy")[0].style.display = "none";
        }
        else {
            $(".status-busy")[0].style.display = "block";
            $(".control-buttons")[0].style.display = "block";
            $(".status-busy")[0].innerText = "You have " + list_length + " pending items";
        }
        //check whether the archived list is blank
        if (archivedItem_length == 0) {
            $("#showComplete-btn").style.display = "none";
        }
        else {
            $("#showComplete-btn").style.display = "inline-block";
        }
        //calculate archivedRate
        let archivedRate = (archivedItem_length / (archivedItem_length + list_length)) * 100;
        archivedRate = archivedRate.toString().split(".")[0];
        if (archivedItem_length != 0) {
            $(".status")[0].innerHTML = "Completed tasks:" + archivedRate + "%";
        }
        else {
            $(".status")[0].innerHTML = "";
        }
    }
    
    //clear button function
    $("#clear-btn").onclick = function () {
        $("#todolist").innerHTML = "";
        $("#archived").innerHTML = "";
        $(".status")[0].innerHTML = "";
        $(".control-buttons")[0].style.display = "none";
    }
    
    //showComplete button function
    let showCompleteFlag = true;
    $("#showComplete-btn").onclick = function () {
        if (showCompleteFlag == true) {
            this.innerHTML = "Hide Complete";
            $("#archived").style.display = "block";
            $(".status")[0].style.display = "block";
        }
        else {
            this.innerHTML = "Show Complete";
            $("#archived").style.display = "none";
            $(".status")[0].style.display = "none";
        }
        showCompleteFlag = -showCompleteFlag;
    }
    
    settingTime();
    setInterval(() => {
        checkItem();
    }, 100);

[https_nourabusoud.github.io_vue-todo-list]: https://nourabusoud.github.io/vue-todo-list/
[https_github.com_Miever1_todo-list-js]: https://github.com/Miever1/todo-list-js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200108141017702.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg==,size_16,color_FFFFFF,t_70