From 8198b8a2b58ceabcaf5649daf9b21792181d56df Mon Sep 17 00:00:00 2001
From: KKKinlibrary <48236175+KKKinlibrary@users.noreply.github.com>
Date: Sat, 21 Dec 2019 16:13:22 +0800
Subject: [PATCH 01/17] editable to do list

---
 js/app.js | 140 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 139 insertions(+), 1 deletion(-)

diff --git a/js/app.js b/js/app.js
index 74cbc288..2723c57a 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1 +1,139 @@
-// CODE EXPLAINED channel
\ No newline at end of file
+const dateElement = document.getElementById('date');
+const clear = document.querySelector('.clear');
+const list = document.getElementById('list');
+const input = document.querySelector('input');
+const addButton = document.querySelector('.fa-plus-circle');
+
+const CHECK = "fa-check-circle";
+const UNCHECK = "fa-circle-thin";
+const LINE_THROUGH = "lineThrough";
+const CHANGE = "editable";
+
+var timer = null, delay = 260, click = 0, canFocus = true;//double click
+
+clear.addEventListener("click", function () {
+    localStorage.clear();
+    location.reload();
+});
+/* show time */
+const options = { weekday: 'long', month: 'short', day: 'numeric' };
+const today = new Date();
+dateElement.innerHTML = today.toLocaleDateString("en-US", options);
+
+let LIST, id;
+let data = localStorage.getItem("TODO");
+//get historical data from localstorage
+if (data) {
+    LIST = JSON.parse(data);
+    id = LIST.length;
+    loadList(LIST);
+}
+else {
+    LIST = []
+    id = 0;
+}
+
+function loadList(array) {
+    array.forEach(element => {
+        add_to_do(element.name, element.id, element.done, element.trash);
+    });
+}
+
+function add_to_do(toDo, id, done, trash) {
+    if (trash)
+        return;
+    const DONE = done ? CHECK : UNCHECK;
+    const LINE = done ? LINE_THROUGH : "";
+
+    const item = `<li class="item">
+                    <i class="fa ${DONE} co" job="complete" id="${id}"></i>
+                    <input class="text ${LINE}" job="edit" value="${toDo}" id="${id}" Blur=""">
+                    <i class="fa fa-trash-o de" job="delete" id="${id}"></i>
+                </li>
+                `;
+    const position = "beforeend";
+    list.insertAdjacentHTML(position, item);//可以使用appendchild直接插入dom，效率会更高
+}
+
+input.addEventListener("keypress", function (even) {
+    if (event.keyCode === 13) {
+        const toDo = input.value;
+        if (toDo) {
+            add_to_do(toDo, id, false, false);
+
+            LIST.push({ name: toDo, id: id, done: false, trash: false });
+
+            localStorage.setItem("TODO", JSON.stringify(LIST));
+            id++;
+            input.value = "";
+        }
+    }
+});
+
+addButton.addEventListener('click', function () {
+    const toDo = input.value;
+    if (toDo) {
+        add_to_do(toDo, id, false, false);
+
+        LIST.push({ name: toDo, id: id, done: false, trash: false });
+
+        localStorage.setItem("TODO", JSON.stringify(LIST));
+        id++;
+        input.value = "";
+    }
+});
+
+list.addEventListener("click", function (event) {
+    const element = event.target;
+    const elementJob = element.attributes.job.value;
+
+    if (elementJob === 'complete') {
+        completeToDo(element);
+    } else if (elementJob === 'delete') {
+        removeToDo(element);
+    }
+    else if(elementJob === 'edit'){
+        editTodo(element);
+    }
+
+    localStorage.setItem("TODO", JSON.stringify(LIST));
+
+}, false);
+
+function completeToDo(element) {
+    element.classList.toggle(UNCHECK);
+    element.classList.toggle(CHECK);
+    element.parentNode.querySelector(".text").classList.toggle(LINE_THROUGH);
+
+    LIST[element.id].done = LIST[element.id].done ? false : true;
+}
+
+function removeToDo(element) {
+    element.parentNode.parentNode.removeChild(element.parentNode);
+    LIST[element.id].trash = true;
+}
+
+function editTodo(element){
+    var newTodo, content = element.parentNode.querySelector(".text");
+    if(canFocus)
+        content.blur();
+    click++;
+    if(click === 1){
+        timer = setTimeout(function(){
+            click = 0;
+        }, (delay));
+    } else{
+        click = 0;
+        canFocus = false;
+        clearTimeout(timer);
+        content.focus();
+        content.onblur = ()=>{
+            newTodo = content.value;
+            LIST[element.id].name = newTodo;
+            localStorage.setItem("TODO",JSON.stringify(LIST));
+            canFocus = true;
+        };
+    }
+    
+}
+

From 2e15b0aff1e26ac1084621446fa783630b063576 Mon Sep 17 00:00:00 2001
From: KKKinlibrary <48236175+KKKinlibrary@users.noreply.github.com>
Date: Sat, 21 Dec 2019 16:17:32 +0800
Subject: [PATCH 02/17] Update README.md

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index e7670232..81b4831c 100644
--- a/README.md
+++ b/README.md
@@ -33,3 +33,6 @@ https://youtu.be/9TcU2C1AACw
 
 Flappy Bird Game Using JavaScript
 https://youtu.be/L07i4g-zhDA
+
+### 2019.12.21
+added a function when double click the item you can edit the content of to-do-list and the changes will auto save then the content lose the focus.

From 8d98c897b2e286ecac924470cc2f07ff6efc8522 Mon Sep 17 00:00:00 2001
From: KKKinlibrary <48236175+KKKinlibrary@users.noreply.github.com>
Date: Sat, 21 Dec 2019 16:43:57 +0800
Subject: [PATCH 03/17] Add files via upload

the content of the to-do-lists are editable!
---
 js/app.js | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/js/app.js b/js/app.js
index 2723c57a..997242e6 100644
--- a/js/app.js
+++ b/js/app.js
@@ -9,7 +9,7 @@ const UNCHECK = "fa-circle-thin";
 const LINE_THROUGH = "lineThrough";
 const CHANGE = "editable";
 
-var timer = null, delay = 260, click = 0, canFocus = true;//double click
+var timer = null, delay = 260, click = 0;//double click
 
 clear.addEventListener("click", function () {
     localStorage.clear();
@@ -47,7 +47,7 @@ function add_to_do(toDo, id, done, trash) {
 
     const item = `<li class="item">
                     <i class="fa ${DONE} co" job="complete" id="${id}"></i>
-                    <input class="text ${LINE}" job="edit" value="${toDo}" id="${id}" Blur=""">
+                    <input disabled="disabled" class="text ${LINE}" job="edit" value="${toDo}" id="${id}" ">
                     <i class="fa fa-trash-o de" job="delete" id="${id}"></i>
                 </li>
                 `;
@@ -114,9 +114,7 @@ function removeToDo(element) {
 }
 
 function editTodo(element){
-    var newTodo, content = element.parentNode.querySelector(".text");
-    if(canFocus)
-        content.blur();
+    var newTodo, content = element.parentNode.querySelector(".text"),preText;
     click++;
     if(click === 1){
         timer = setTimeout(function(){
@@ -124,14 +122,17 @@ function editTodo(element){
         }, (delay));
     } else{
         click = 0;
-        canFocus = false;
         clearTimeout(timer);
+        preText = content.value;
+        content.disabled = false;
         content.focus();
         content.onblur = ()=>{
             newTodo = content.value;
-            LIST[element.id].name = newTodo;
-            localStorage.setItem("TODO",JSON.stringify(LIST));
-            canFocus = true;
+            if(preText !== newTodo){
+                LIST[element.id].name = newTodo;
+                localStorage.setItem("TODO",JSON.stringify(LIST));
+                content.disabled = true;
+            }            
         };
     }
     

From 7f699802d673565bcec0509fb1f0c2f8cd2daf11 Mon Sep 17 00:00:00 2001
From: KKKinlibrary <48236175+KKKinlibrary@users.noreply.github.com>
Date: Sat, 21 Dec 2019 16:47:22 +0800
Subject: [PATCH 04/17] Add files via upload

the page of the to-do-list
---
 homepage.html | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 homepage.html

diff --git a/homepage.html b/homepage.html
new file mode 100644
index 00000000..44c99909
--- /dev/null
+++ b/homepage.html
@@ -0,0 +1,39 @@
+<!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>Too many lists to do</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web">
+    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
+    <link rel="stylesheet" href="css/style.css">
+    </script>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <div class="clear"> 
+                <i class="fa fa-refresh"></i>
+            </div>
+            <div id="date"></div>
+        </div>
+
+        <div class="content">
+            <ul id="list"><!--  
+                <li class="item">
+                    <i class="fa fa-circle-thin co"></i>
+                    <p class="text">Drink Coffee</p>
+                    <i class="fa fa-trash-o de"></i>
+                </li>    -->
+            </ul> 
+        </div>
+        <div class="add-to-do">
+            <i class="fa fa-plus-circle"></i>
+            <input type="text" id="input" placeholder="Add a to-do">
+        </div>
+    </div>
+    <script src="JS/app.js"></script>
+    
+</body>
+</html>
\ No newline at end of file

From 38c800503fc80b8a05edae6a58a242e0c7a4b00a Mon Sep 17 00:00:00 2001
From: KKKinlibrary <48236175+KKKinlibrary@users.noreply.github.com>
Date: Sat, 21 Dec 2019 16:57:39 +0800
Subject: [PATCH 05/17] Set theme jekyll-theme-time-machine

---
 _config.yml | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 _config.yml

diff --git a/_config.yml b/_config.yml
new file mode 100644
index 00000000..ddeb671b
--- /dev/null
+++ b/_config.yml
@@ -0,0 +1 @@
+theme: jekyll-theme-time-machine
\ No newline at end of file

From 58a1f849b04cc226a32d20b450523d6b460fa1a4 Mon Sep 17 00:00:00 2001
From: KKKinlibrary <48236175+KKKinlibrary@users.noreply.github.com>
Date: Sat, 21 Dec 2019 17:01:00 +0800
Subject: [PATCH 06/17] Rename index.html to ind22ex.html

---
 index.html => ind22ex.html | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename index.html => ind22ex.html (100%)

diff --git a/index.html b/ind22ex.html
similarity index 100%
rename from index.html
rename to ind22ex.html

From 66f948aeb34f08fa68124601f0d945245cbb78b5 Mon Sep 17 00:00:00 2001
From: KKKinlibrary <48236175+KKKinlibrary@users.noreply.github.com>
Date: Sat, 21 Dec 2019 17:01:29 +0800
Subject: [PATCH 07/17] Delete ind22ex.html

---
 ind22ex.html | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 ind22ex.html

diff --git a/ind22ex.html b/ind22ex.html
deleted file mode 100644
index 3bf3ada8..00000000
--- a/ind22ex.html
+++ /dev/null
@@ -1 +0,0 @@
-<!-- CODE EXPLAINED CHANNEL -->

From 834e761f4dbcd3668c0356bb17be8dcdf4b8084f Mon Sep 17 00:00:00 2001
From: KKKinlibrary <48236175+KKKinlibrary@users.noreply.github.com>
Date: Sat, 21 Dec 2019 17:01:58 +0800
Subject: [PATCH 08/17] Rename homepage.html to index.html

---
 homepage.html => index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename homepage.html => index.html (96%)

diff --git a/homepage.html b/index.html
similarity index 96%
rename from homepage.html
rename to index.html
index 44c99909..985ec8a5 100644
--- a/homepage.html
+++ b/index.html
@@ -36,4 +36,4 @@
     <script src="JS/app.js"></script>
     
 </body>
-</html>
\ No newline at end of file
+</html>

From 145f1f73316d472a1c39c92ad82bd8c7fdf42096 Mon Sep 17 00:00:00 2001
From: KKKinlibrary <48236175+KKKinlibrary@users.noreply.github.com>
Date: Sat, 21 Dec 2019 17:37:03 +0800
Subject: [PATCH 09/17] Update index.html

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 985ec8a5..1194d1da 100644
--- a/index.html
+++ b/index.html
@@ -33,7 +33,7 @@
             <input type="text" id="input" placeholder="Add a to-do">
         </div>
     </div>
-    <script src="JS/app.js"></script>
+    <script src="js/app.js"></script>
     
 </body>
 </html>

From 67bcdd78c3605ae9ee4a586c23fe343ef0d10468 Mon Sep 17 00:00:00 2001
From: KKKinlibrary <48236175+KKKinlibrary@users.noreply.github.com>
Date: Sat, 21 Dec 2019 17:47:02 +0800
Subject: [PATCH 10/17] Add files via upload

change the style of the item
---
 css/style.css | 177 ++++++++++++++++++++++----------------------------
 1 file changed, 79 insertions(+), 98 deletions(-)

diff --git a/css/style.css b/css/style.css
index ba131516..63e85a6e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,130 +1,153 @@
-/* ------------ youtube.com/CodeExplained ------------ */
 body{
     padding: 0;
     margin: 0;
-    background-color: rgba(0,0,0,0.1);
+    background-color:rgba(0,0,0, 0.1);
     font-family: 'Titillium Web', sans-serif;
 }
-
-/* ------------ container ------------ */
+/*  -----container-----  */
 .container{
-    padding:10px;
-    width:380px;
-    margin:0 auto;
+    padding: 10px;
+    width: 380px;
+    margin: 0 auto;
 }
-
-/* ------------ header ------------ */
+/*  -----header-----  */
 .header{
     width: 380px;
-    height:200px;
-    background-image: url('../img/bg2.jpg');
+    height: 200px;
+    background-image: url('../img/bg1.jpg');
     background-size: 100% 200%;
     background-repeat: no-repeat;
     border-radius: 15px 15px 0 0;
     position: relative;
 }
+
 .clear{
-    width : 30px;
+    width: 30px;
     height: 30px;
     position: absolute;
-    right:20px;
     top: 20px;
+    right: 20px;
 }
+
 .clear i{
     font-size: 30px;
-    color: #FFF;
+    color: #fff;
 }
+
 .clear i:hover{
     cursor: pointer;
     text-shadow: 1px 3px 5px #000;
     transform: rotate(45deg);
 }
+
 #date{
     position: absolute;
     bottom: 10px;
     left: 10px;
     color: #FFF;
     font-size: 25px;
-    font-family: 'Titillium Web', sans-serif;
+    font-family: 'Titillium Web' sans-serif;
 }
-
-/* ------------ content ------------ */
+/*  -----content-----  */
 .content{
-    width:380px;
+    width: 380px;
     height: 350px;
-    max-height:350px;
-    background-color: #FFF;
+    max-height: 350px;
+    background-color: #FFF; 
+    border-radius: 0 0 0 0;
     overflow: auto;
 }
-.content::-webkit-scrollbar { 
-    display: none; 
-}
+
 .content ul{
-    padding:0;
-    margin:0;
+    padding: 0;
+    margin: 0;
 }
+
+.fa-check-circle{
+    color: #6eb200;
+}
+
 .item{
-    width:380px;
+    font-size: 15px;
+    color: #000;
+    width: 380px;
     height: 45px;
     min-height: 45px;
-    position: relative;
-    border-bottom: 1px solid rgba(0,0,0,0.1);
+    border-bottom: 1px solid rgba(0,0,0, 0.1);
     list-style: none;
+    position: relative;
     padding: 0;
     margin: 0;
 }
+
 .item i.co{
     position: absolute;
     font-size: 25px;
-    padding-left:5px;
-    left:15px;
-    top:10px;
+    padding-left: 5px;
+    left: 15px;
+    top: 10px;
 }
+
 .item i.co:hover{
     cursor: pointer;
 }
-.fa-check-circle{
-    color:#6eb200;
-}
-.item p.text{
+
+.item input.text{
     position: absolute;
-    padding:0;
-    margin:0;
+    padding: 0;
+    margin: 0;
     font-size: 20px;
-    left:50px;
-    top:5px;
-    background-color: #FFF;
-    max-width:285px;
+    left: 50px;
+    top: 10px;
+    background-color: #fff;
+    width: 285px;
+    overflow: hidden;
+    border: none;    
 }
-.lineThrough{
-    text-decoration: line-through;
-    color : #ccc;
+
+.item input:disabled{
+    color: #000;
+    font-size: 20px;
 }
+
 .item i.de{
     position: absolute;
     font-size: 25px;
-    right:15px;
-    top:10px;
+    right: 15px;
+    top: 10px;
 }
+
 .item i.de:hover{
-    color:#af0000;
+    color: red;
     cursor: pointer;
 }
-/* ------------ add item ------------ */
+
+.lineThrough{
+    text-decoration: line-through;
+    color: #ccc;
+}
+
+/* ------ add item ------*/
 .add-to-do{
     position: relative;
-    width: 360px;
-    height:40px;
-    background-color: #FFF;
+    width: auto;
+    height: 40px;
+    background-color: #fff;
     padding: 10px;
-    border-top: 1px solid rgba(0,0,0,0.1);
+    border-top: 1px solid rgba(0,0,0, 0.1);
 }
+
 .add-to-do i{
     position: absolute;
     font-size: 40px;
     color: #4162f6;
 }
 
+.add-to-do i:hover{
+    cursor: pointer;
+    text-shadow: 1px 2px 3px blue;
+}
+
 .add-to-do input{
     position: absolute;
     left: 50px;
@@ -133,53 +156,11 @@ body{
     background-color: transparent;
     border: none;
     font-size: 20px;
-    padding-left:10px;
-}
-.add-to-do input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-    color: #4162f6;
-    font-family: 'Titillium Web', sans-serif;
-    font-size: 20px;
-}
-.add-to-do input::-moz-placeholder { /* Firefox 19+ */
-    color: #4162f6;
-    font-family: 'Titillium Web', sans-serif;
-    font-size: 20px;
-}
-.add-to-do input:-ms-input-placeholder { /* IE 10+ */
-    color: #4162f6;
-    font-family: 'Titillium Web', sans-serif;
-    font-size: 20px;
+    padding-left: 10px;
 }
-.add-to-do input:-moz-placeholder { /* Firefox 18- */
+
+.add-to-do input::placeholder{
     color: #4162f6;
     font-family: 'Titillium Web', sans-serif;
     font-size: 20px;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+}
\ No newline at end of file

From 0bb24f96a9b392d456021a97c59ed62be2f27ec6 Mon Sep 17 00:00:00 2001
From: KKKinlibrary <48236175+KKKinlibrary@users.noreply.github.com>
Date: Sat, 21 Dec 2019 19:07:15 +0800
Subject: [PATCH 11/17] Update style.css

123
---
 css/style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/css/style.css b/css/style.css
index 63e85a6e..741e1efb 100644
--- a/css/style.css
+++ b/css/style.css
@@ -124,7 +124,7 @@ body{
 
 .lineThrough{
     text-decoration: line-through;
-    color: #ccc;
+    color: #ccc !important;
 }
 
 /* ------ add item ------*/
@@ -163,4 +163,4 @@ body{
     color: #4162f6;
     font-family: 'Titillium Web', sans-serif;
     font-size: 20px;
-}
\ No newline at end of file
+}

From da5f62acbf4ef692948a7ebe3e926b736133bec8 Mon Sep 17 00:00:00 2001
From: KKKinlibrary <48236175+KKKinlibrary@users.noreply.github.com>
Date: Tue, 24 Dec 2019 12:14:15 +0800
Subject: [PATCH 12/17] 12.24

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 81b4831c..6238872a 100644
--- a/README.md
+++ b/README.md
@@ -36,3 +36,5 @@ https://youtu.be/L07i4g-zhDA
 
 ### 2019.12.21
 added a function when double click the item you can edit the content of to-do-list and the changes will auto save then the content lose the focus.
+
+You can see the result in https://kkkinlibrary.github.io/To-Do-List/

From e04ef749047992783e4f747ee062cbd991da47cd Mon Sep 17 00:00:00 2001
From: KKKinlibrary <48236175+KKKinlibrary@users.noreply.github.com>
Date: Tue, 24 Dec 2019 16:03:28 +0800
Subject: [PATCH 13/17] added a small function

three buttons are added so that you can check the lists based on completion
---
 index.html | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 1194d1da..da51f69b 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,12 @@
             <div class="clear"> 
                 <i class="fa fa-refresh"></i>
             </div>
-            <div id="date"></div>
+            <div class="display">                
+                <span id="date"></span>
+                <i class="fa fa-pencil-square-o All"></i>
+                <i class="fa fa-check-square-o fulfill"></i>
+                <i class="fa fa-square-o unfinished"></i>
+            </div>
         </div>
 
         <div class="content">
@@ -33,7 +38,7 @@
             <input type="text" id="input" placeholder="Add a to-do">
         </div>
     </div>
-    <script src="js/app.js"></script>
+    <script src="JS/app.js"></script>
     
 </body>
 </html>

From 2990fa9f45d4eed6fc585346bb880b8d3b181fb9 Mon Sep 17 00:00:00 2001
From: KKKinlibrary <48236175+KKKinlibrary@users.noreply.github.com>
Date: Tue, 24 Dec 2019 16:04:18 +0800
Subject: [PATCH 14/17] 123

---
 js/app.js | 89 +++++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 76 insertions(+), 13 deletions(-)

diff --git a/js/app.js b/js/app.js
index 997242e6..c9e5d991 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3,13 +3,16 @@ const clear = document.querySelector('.clear');
 const list = document.getElementById('list');
 const input = document.querySelector('input');
 const addButton = document.querySelector('.fa-plus-circle');
+const show_all = document.querySelector('.All');
+const show_finished = document.querySelector('.fulfill');
+const show_unfinished = document.querySelector('.unfinished');
 
 const CHECK = "fa-check-circle";
 const UNCHECK = "fa-circle-thin";
 const LINE_THROUGH = "lineThrough";
 const CHANGE = "editable";
 
-var timer = null, delay = 260, click = 0;//double click
+var status = "all", timer = null, delay = 260, click = 0;//double click
 
 clear.addEventListener("click", function () {
     localStorage.clear();
@@ -55,6 +58,55 @@ function add_to_do(toDo, id, done, trash) {
     list.insertAdjacentHTML(position, item);//可以使用appendchild直接插入dom，效率会更高
 }
 
+function defReload(array, status){
+    if(status === "all"){
+        array.forEach(element=>{
+            add_to_do(element.name, element.id, element.done, element.trash)
+        });
+    }
+    else if(status === "completed"){
+        array.forEach(element => {
+            if (element.done) {
+                add_to_do(element.name, element.id, element.done, element.trash);
+            }
+        });
+    }
+    else{
+        array.forEach(element => {
+            if (!element.done) {
+                add_to_do(element.name, element.id, element.done, element.trash);
+            }
+        });
+    }
+}
+
+show_all.addEventListener("click", function () {
+    var i, list_length = list.childNodes.length;
+    status = "all";
+    for (i = 0; i < list_length; i++) {
+        list.removeChild(list.lastChild);
+    }
+    defReload(LIST,"all");
+});
+
+show_finished.addEventListener("click", function () {
+    var i, list_length = list.childNodes.length;
+    status = "completed";
+    for (i = 0; i < list_length; i++) {
+        list.removeChild(list.lastChild);
+    }
+    defReload(LIST,"completed");
+});
+
+show_unfinished.addEventListener("click", function () {
+    var i, list_length = list.childNodes.length;
+    status = "active";
+    for (i = 0; i < list_length; i++) {
+        list.removeChild(list.lastChild);
+    }
+    defReload(LIST,"active");
+});
+
 input.addEventListener("keypress", function (even) {
     if (event.keyCode === 13) {
         const toDo = input.value;
@@ -92,7 +144,7 @@ list.addEventListener("click", function (event) {
     } else if (elementJob === 'delete') {
         removeToDo(element);
     }
-    else if(elementJob === 'edit'){
+    else if (elementJob === 'edit') {
         editTodo(element);
     }
 
@@ -106,6 +158,17 @@ function completeToDo(element) {
     element.parentNode.querySelector(".text").classList.toggle(LINE_THROUGH);
 
     LIST[element.id].done = LIST[element.id].done ? false : true;
+    if(status === "active" && LIST[element.id].done){
+        element.parentNode.parentNode.removeChild(element.parentNode);
+    }
+    else if(status === "completed" && !LIST[element.id].done){
+        element.parentNode.parentNode.removeChild(element.parentNode);
+    }
+    else if(LIST[element.id].done){
+        var temp = element.parentNode, realParent = element.parentNode.parentNode;
+        element.parentNode.parentNode.removeChild(element.parentNode);
+        realParent.appendChild(temp);
+    }
 }
 
 function removeToDo(element) {
@@ -113,28 +176,28 @@ function removeToDo(element) {
     LIST[element.id].trash = true;
 }
 
-function editTodo(element){
-    var newTodo, content = element.parentNode.querySelector(".text"),preText;
+function editTodo(element) {
+    var newTodo, content = element.parentNode.querySelector(".text"), preText;
     click++;
-    if(click === 1){
-        timer = setTimeout(function(){
+    if (click === 1) {
+        timer = setTimeout(function () {
             click = 0;
         }, (delay));
-    } else{
+    } else {
         click = 0;
         clearTimeout(timer);
         preText = content.value;
         content.disabled = false;
         content.focus();
-        content.onblur = ()=>{
+        content.onblur = () => {
             newTodo = content.value;
-            if(preText !== newTodo){
+            if (preText !== newTodo) {
                 LIST[element.id].name = newTodo;
-                localStorage.setItem("TODO",JSON.stringify(LIST));
-                content.disabled = true;
-            }            
+                localStorage.setItem("TODO", JSON.stringify(LIST));
+            }
+            content.disabled = true;
         };
     }
-    
+
 }
 

From 10bd26d11d2ab4ed6e486ed2efb8950ed6f01824 Mon Sep 17 00:00:00 2001
From: KKKinlibrary <48236175+KKKinlibrary@users.noreply.github.com>
Date: Tue, 24 Dec 2019 16:05:12 +0800
Subject: [PATCH 15/17] 123

---
 css/style.css | 44 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/css/style.css b/css/style.css
index 741e1efb..c482e376 100644
--- a/css/style.css
+++ b/css/style.css
@@ -48,6 +48,46 @@ body{
     font-size: 25px;
     font-family: 'Titillium Web' sans-serif;
 }
+
+.display{
+    position: absolute;
+    height: 45px;
+    width: 380px;
+    top: 160px;
+}
+
+.display i.All{
+    position: absolute;
+    right: 60px;
+    font-size: 25px;
+    color: #fff;
+    bottom: 13px;
+}
+.display i.All:hover{
+    cursor: pointer;
+}
+
+.display i.fulfill{
+    position: absolute;
+    right: 35px;
+    font-size: 25px;
+    color: #fff;
+    bottom: 13px;
+}
+.display i.fulfill:hover{
+    cursor: pointer;
+}
+
+.display i.unfinished{
+    position: absolute;
+    right: 10px;
+    font-size: 25px;
+    color: #fff;
+    bottom: 13px;
+}
+.display i.unfinished:hover{
+    cursor: pointer;
+}
 /*  -----content-----  */
 .content{
     width: 380px;
@@ -127,6 +167,10 @@ body{
     color: #ccc !important;
 }
 
+::-webkit-scrollbar{
+    display: none;
+}
+
 /* ------ add item ------*/
 .add-to-do{
     position: relative;

From 61387696982fb569eb05b72d4e427ae01a496737 Mon Sep 17 00:00:00 2001
From: KKKinlibrary <48236175+KKKinlibrary@users.noreply.github.com>
Date: Tue, 24 Dec 2019 16:08:57 +0800
Subject: [PATCH 16/17] 123

---
 README.md | 40 ++--------------------------------------
 1 file changed, 2 insertions(+), 38 deletions(-)

diff --git a/README.md b/README.md
index 6238872a..461263d2 100644
--- a/README.md
+++ b/README.md
@@ -1,40 +1,4 @@
-# To-Do-List Using JavaScript
-In this tutorial, a JavaScript beginner can be able to create a beautiful and functional to do list using JavaScript.
-I will talk about the logic behind every line of code, before opening my text editor and start typing the code.
-it's a step by step tutorial, you won't get lost at any stage of this tutorial.
-
-to follow the tutorial step by step, when we get to the second part (when we type the code), you'll need to download the starter template from here.
-
-The tutorial video link : https://youtu.be/b8sUhU_eq3g
-
-When you open the folder, you'll find all the files needed to get started, the CSS code, is already typed (see style.css file), as we're not going to talk about CSS in our tutorial. we're going just to talk about HTML and JavaScript.
-
-the to-do list we're going to create has a beautiful UI, the user can add a to-do by filling the input and hit ENTER, after that he can rather check the to-do when it's done, or remove it using the delete button.
-
-The user's to-do list is stored in the local storage, so when he refreshes the page, he can always find the list there.
-
-There is the possibility for the user, to clear the list, by clicking the button clear, at the top right corner of our app.
-
-The to do list app, shows the today's date to the user, for that we're using a method called toLocaleDateString, which you can read about here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
-
-///// Here you can find some other tutorial, that you might like to see /////
-
-Ping Pong Game Using JavaScript
-https://youtu.be/nl0KXCa5pJk
-
-Create a Multiple Choice Quiz Using JavaScript
-https://youtu.be/49pYIMygIcU
-
-Tetris Game Using JavaScript
-https://youtu.be/HEsAr2Yt2do
-
-Snake Game Using JavaScript
-https://youtu.be/9TcU2C1AACw
-
-Flappy Bird Game Using JavaScript
-https://youtu.be/L07i4g-zhDA
-
-### 2019.12.21
-added a function when double click the item you can edit the content of to-do-list and the changes will auto save then the content lose the focus.
+### 2019.12
+Based on the preview job, I have added two functions. The first one when double click the item you can edit the content of to-do-list and the changes will auto save when the content lose the focus. The second one is that you can see the lists sorted by their completion.
 
 You can see the result in https://kkkinlibrary.github.io/To-Do-List/

From 8c78450b6b05b3baa05bc03eaed096e67488c732 Mon Sep 17 00:00:00 2001
From: kvna <nick116444@gmail.com>
Date: Sun, 29 Mar 2020 14:47:57 +0800
Subject: [PATCH 17/17] fix bug

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index da51f69b..a9291c91 100644
--- a/index.html
+++ b/index.html
@@ -38,7 +38,7 @@
             <input type="text" id="input" placeholder="Add a to-do">
         </div>
     </div>
-    <script src="JS/app.js"></script>
+    <script src="js/app.js"></script>
     
 </body>
 </html>