todo list

assets/css/index.css

@@ -5,6 +5,20 @@ body {
   color: #efede0;
 }
 
+button, .add {
+  background-color: #efede0; 
+  border-radius: 8px;
+  color: #66635a;
+}
+
+input[name="write_item"] {
+  background-color: #ffffff; 
+  border-radius: 8px;
+  color: #66635a;
+  width: 200px;
+  transition: width 2s;
+}
+
 header,
 footer {
   padding: 20px;

assets/js/index.js

@@ -0,0 +1,110 @@
+
+document
+    .querySelector("ul")
+    .addEventListener("click", e =>{
+        if(e.target.tagName === 'LI'){
+            if(e.metaKey){
+                e.target.remove();
+            }
+            else{
+                e.target.style = 'text-decoration : line-through';
+            }
+        }
+    });
+
+for(let butt of document.querySelectorAll("button")){
+    butt.addEventListener("click", e =>{
+        for(let item of document.querySelectorAll("li")){
+            if(e.target.name === "mark_all"){
+                item.style = 'text-decoration : line-through';
+            }
+            else if(e.target.name === "delete_all"  && item.style.textDecoration === 'line-through'){
+                item.remove();
+            }
+        }
+    });
+}
+
+
+document.getElementById("write_item")
+    .addEventListener("input", e =>{
+        if(e.target.value !== "" && e.target.value !== "Write up your todo here"){
+            document.getElementById("add").disabled = false;
+        }
+        else{
+            document.getElementById("add").disabled = true;
+        }
+});
+
+document.getElementById("add")
+    .addEventListener("click", e =>{
+        e.preventDefault();
+        const item = document.createElement("li");
+        const node = document.createTextNode(document.getElementById("write_item").value);
+        item.append(node);
+        document.querySelector("ul").prepend(item);
+        document.getElementById("write_item").value = "Write up your todo here";
+        document.getElementById("write_item").style.width = '';
+        document.getElementById("add").disabled = true;
+});
+
+document.getElementById("write_item")
+    .addEventListener("focus", e =>{
+        e.target.style.width = '500px';
+});
+
+document.getElementById("write_item")
+    .addEventListener("blur", e =>{
+        if(e.target.value === "" || e.target.value === "Write up your todo here"){
+            e.target.style.width = '';
+        }
+    });
+
+document
+    .addEventListener("keydown", e =>{
+        let list_li = document.querySelectorAll("li");
+        if(e.keyCode === 9 && list_li.length > 0){ //tab
+            e.preventDefault();
+            let index = -1;
+            for(let i = 0; i < list_li.length; i++){
+                if(document.activeElement === list_li[i]){
+                    index = i;
+                }
+            }
+            if(index === -1 || index === list_li.length-1){
+                list_li[0].focus();
+            }
+            else{
+                list_li[index+1].focus();
+            }
+            console.log(index);
+        }
+    });
+
+document
+    .querySelector("ul")
+    .addEventListener("focus", e =>{
+        if(e.target.tagName === 'LI'){
+            if(e.target.textDecoration === 'line-through'){
+                e.target.textDecoration = 'underline line-through';
+            }
+            else{
+                e.target.textDecoration = 'underline';
+            }
+            e.target.style.listStyleType = 'circle';
+        }
+    });
+
+document
+    .querySelector("ul")
+    .addEventListener("blur", e =>{
+        if(e.target.tagName === 'LI'){
+            if(e.target.textDecoration === 'underline line-through'){
+                e.target.textDecoration = 'line-through';
+            }
+            else{
+                e.target.textDecoration = '';
+            }
+            e.target.style.listStyleType = 'disc';
+        }
+    });

index.html

@@ -14,11 +14,19 @@ <h1>ExCo.</h1>
     </header>
     <main>
       <h2>My Todos List</h2>
+      <form>
+      <input type="text" name="write_item" id="write_item" value="Write up your todo here">
+      <input type="submit" class="add" id="add" value="Add" disabled>
+      </form>
       <ul>
         <li>Have morning coffee</li>
         <li>Eat lunch</li>
         <li>Make awesome things happen</li>
       </ul>
+      <span>
+      <button type="button" name="mark_all">Mark all as done</button>
+      <button type="button" name="delete_all">Delete all done</button>
+      </span>
     </main>
     <footer>
       <small>&copy; Copyright 2058, Example Corporation</small>