├── style.css ├── README.md ├── index.html └── main.js /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: white; 3 | color: black; 4 | } 5 | 6 | header { 7 | color: #25b99a; 8 | font-size: 4vw; 9 | text-align: center; 10 | } 11 | 12 | footer { 13 | color: #25b99a; 14 | font-size: 2vw; 15 | text-align: center; 16 | } 17 | 18 | li { 19 | direction: rtl; 20 | margin: 10px; 21 | padding: 10px; 22 | } 23 | 24 | li:hover { 25 | background-color: #8a8585; 26 | } 27 | 28 | .tasks { 29 | background-color: #25b99a; 30 | cursor: pointer; 31 | color: black; 32 | padding: 2px; 33 | } 34 | 35 | .tasks:hover { 36 | cursor: pointer; 37 | background-color: greenyellow; 38 | } 39 | 40 | .tasks:active { 41 | background-color: greenyellow; 42 | } 43 | 44 | ::placeholder { 45 | /* Chrome, Firefox, Opera, Safari 10.1+ */ 46 | color: red; 47 | opacity: 1; 48 | /* Firefox */ 49 | } 50 | 51 | @media only screen and (max-width: 600px) { 52 | header { 53 | color: #25b99a; 54 | font-size: 7vw; 55 | text-align: center; 56 | } 57 | footer { 58 | color: #25b99a; 59 | font-size: 4vw; 60 | text-align: center; 61 | } 62 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 | 4 | 5 | TODO 6 | 7 |

Todo Manager

8 |

9 | 10 |

11 |

12 | This is a Todo List using HTML/CSS/JavaScript 13 |

14 |

15 |
16 |
17 | 18 |

19 |

Technologies:

20 |

21 |

22 |

23 |

24 |

-------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Todo List 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 |

19 |

Todo Manager

20 |

21 | 22 | 23 |

24 | 25 |

26 | 27 | 31 |

32 |

33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | // const inputBox = document.querySelector(".NewTask input") 2 | // const addBtn = document.querySelector(".NewTask button") 3 | // const todoList = document.querySelector(".todoList") 4 | // const deleteAllBtn = document.querySelector(".footer button") 5 | const txtNewTask = document.getElementById("txtNewTask") 6 | const btnAddTask = document.getElementById("btnAddTask") 7 | const OngingTask = document.getElementById("Onging-Task") 8 | const btnDoneAll = document.getElementById("btnDoneAll") 9 | 10 | 11 | txtNewTask.onkeyup = () => { 12 | let NewTaskUser = txtNewTask.value 13 | 14 | if (NewTaskUser.trim() != 0) { 15 | document.getElementById("btnAddTask").disabled = false 16 | } else { 17 | document.getElementById("btnAddTask").disabled = true 18 | } 19 | } 20 | 21 | 22 | ShowTask() 23 | 24 | 25 | btnAddTask.onclick = () => { 26 | let NewTaskUser = txtNewTask.value 27 | let getLocalStorage = localStorage.getItem("Ongoing Tasks") 28 | if (getLocalStorage == null) { 29 | TaskList = [] 30 | } else { 31 | TaskList = JSON.parse(getLocalStorage) 32 | } 33 | TaskList.push(NewTaskUser) 34 | localStorage.setItem("Ongoing Tasks", JSON.stringify(TaskList)) 35 | ShowTask() 36 | } 37 | 38 | function ShowTask() { 39 | let getLocalStorage = localStorage.getItem("Ongoing Tasks") 40 | if (getLocalStorage == null) { 41 | TaskList = [] 42 | } else { 43 | TaskList = JSON.parse(getLocalStorage) 44 | } 45 | const PendingTask = document.getElementById("pendingTask") 46 | PendingTask.textContent = TaskList.length 47 | 48 | 49 | let newLiTag = '' 50 | TaskList.forEach((item, index) => { 51 | newLiTag += `

${item}

` 52 | }); 53 | OngingTask.innerHTML = newLiTag 54 | txtNewTask.value = "" 55 | document.getElementById("btnAddTask").disabled = true 56 | } 57 | 58 | function DoneTask(index) { 59 | let getLocalStorage = localStorage.getItem("Ongoing Tasks") 60 | TaskList = JSON.parse(getLocalStorage) 61 | TaskList.splice(index, 1) 62 | localStorage.setItem("Ongoing Tasks", JSON.stringify(TaskList)) 63 | ShowTask() 64 | } 65 | 66 | btnDoneAll.onclick = () => { 67 | TaskList = [] 68 | localStorage.setItem("Ongoing Tasks", JSON.stringify(TaskList)) 69 | ShowTask() 70 | } 71 | 72 | document.getElementById("txtNewTask").addEventListener("keyup", function(event) { 73 | if (event.keyCode === 13) { 74 | document.getElementById("btnAddTask").click() 75 | return false; 76 | } 77 | }); --------------------------------------------------------------------------------