├── to do.png ├── README.md ├── index.html ├── index.js └── style.css /to do.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/5codeman/TO-DO-LIST/HEAD/to do.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # TO-DO-LIST 2 | 3 | TO-DO-LIST (Made using HTML5 CSS3 and JavaScript) 4 | 5 | You can see the website live at: https://5codeman.github.io/TO-DO-LIST/ 6 | 7 | ABOUT THIS PROJECT-: 8 | 9 | 1. In this project i have created a simple to-do app using HTML CSS and JavaScript. 10 | 2. Built a To-Do List application to make a list of daily works written down in one place. 11 | 3. Implemented functionalities like add task, remove task, filter tasks and also mark tasks as done. 12 | 13 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Todolist 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 |

Todo List

24 | 25 |
26 | 28 | 31 |
32 |
33 | 34 | 35 | 36 |
37 | 38 | 41 | 44 |
45 | 46 | 47 | 48 | 51 | 52 | 53 | 54 |
55 |
56 | 57 |
58 | All 59 | Pending 60 | Completed 61 |
62 |
63 | 64 | 65 |
66 |

Completed: 0

67 |
68 |
69 |

Total Tasks: 0

70 |
71 |
72 |
73 | 74 | 75 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var todoList = [] 2 | var comdoList = []; 3 | var remList = []; 4 | var addButton = document.getElementById("add-button") 5 | var todoInput = document.getElementById("todo-input") 6 | var deleteAllButton = document.getElementById("delete-all") 7 | var allTodos = document.getElementById("all-todos"); 8 | var deleteSButton = document.getElementById("delete-selected") 9 | 10 | 11 | //event listners for add and delete 12 | addButton.addEventListener("click", add) 13 | deleteAllButton.addEventListener("click", deleteAll) 14 | deleteSButton.addEventListener("click", deleteS) 15 | 16 | 17 | //event listeners for filtersk 18 | document.addEventListener('click', (e) => { 19 | if (e.target.className.split(' ')[0] == 'complete' || e.target.className.split(' ')[0] == 'ci') { 20 | completeTodo(e); 21 | } 22 | if (e.target.className.split(' ')[0] == 'delete' || e.target.className.split(' ')[0] == 'di') { 23 | deleteTodo(e) 24 | } 25 | if (e.target.id == "all") { 26 | viewAll(); 27 | } 28 | if (e.target.id == "rem") { 29 | viewRemaining(); 30 | } 31 | if (e.target.id == "com") { 32 | viewCompleted(); 33 | } 34 | 35 | }) 36 | //event listner for enter key 37 | todoInput.addEventListener('keypress', (e) => { 38 | if (e.key === 'Enter') { 39 | add(); 40 | } 41 | }); 42 | 43 | 44 | //updates the all the remaining, completed and main list 45 | function update() { 46 | comdoList = todoList.filter((ele) => { 47 | return ele.complete 48 | 49 | }) 50 | remList = todoList.filter((ele) => { 51 | return !ele.complete 52 | }) 53 | document.getElementById("r-count").innerText = todoList.length.toString(); 54 | document.getElementById("c-count").innerText = comdoList.length.toString(); 55 | 56 | } 57 | 58 | //adds the task in main list 59 | 60 | function add() { 61 | var value = todoInput.value; 62 | if (value === '') { 63 | alert("😮 Task cannot be empty") 64 | return; 65 | } 66 | todoList.push({ 67 | task: value, 68 | id: Date.now().toString(), 69 | complete: false, 70 | }); 71 | 72 | todoInput.value = ""; 73 | update(); 74 | addinmain(todoList); 75 | } 76 | 77 | 78 | //renders the main list and views on the main content 79 | 80 | function addinmain(todoList) { 81 | allTodos.innerHTML = "" 82 | todoList.forEach(element => { 83 | var x = `
  • 84 |

    ${element.complete ? `${element.task}` : element.task}

    85 |
    86 | 89 | 90 | 93 |
    94 |
    • ` 95 | allTodos.innerHTML += x 96 | }); 97 | } 98 | 99 | 100 | //deletes and indiviual task and update all the list 101 | function deleteTodo(e) { 102 | var deleted = e.target.parentElement.parentElement.getAttribute('id'); 103 | todoList = todoList.filter((ele) => { 104 | return ele.id != deleted 105 | }) 106 | 107 | update(); 108 | addinmain(todoList); 109 | 110 | } 111 | 112 | //completes indiviaula task and updates all the list 113 | function completeTodo(e) { 114 | var completed = e.target.parentElement.parentElement.getAttribute('id'); 115 | todoList.forEach((obj) => { 116 | if (obj.id == completed) { 117 | if (obj.complete == false) { 118 | obj.complete = true 119 | e.target.parentElement.parentElement.querySelector("#task").classList.add("line"); 120 | } else { 121 | obj.complete = false 122 | 123 | e.target.parentElement.parentElement.querySelector("#task").classList.remove("line"); 124 | } 125 | } 126 | }) 127 | 128 | update(); 129 | addinmain(todoList); 130 | } 131 | 132 | 133 | //deletes all the tasks 134 | function deleteAll(todo) { 135 | 136 | todoList = [] 137 | 138 | update(); 139 | addinmain(todoList); 140 | 141 | } 142 | 143 | //deletes only completed task 144 | function deleteS(todo) { 145 | 146 | todoList = todoList.filter((ele) => { 147 | return !ele.complete; 148 | }) 149 | 150 | 151 | update(); 152 | addinmain(todoList); 153 | 154 | } 155 | 156 | 157 | // functions for filters 158 | function viewCompleted() { 159 | addinmain(comdoList); 160 | } 161 | 162 | function viewRemaining() { 163 | 164 | addinmain(remList); 165 | } 166 | function viewAll() { 167 | addinmain(todoList); 168 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;800;900&display=swap'); 2 | 3 | /* for whole documents */ 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 9 | } 10 | 11 | /* for hide scroll bar */ 12 | ::-webkit-scrollbar { 13 | display: none; 14 | } 15 | 16 | body{ 17 | position: relative; 18 | height: 100vh; 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | background-color: rgb(4, 4, 35); 23 | } 24 | 25 | 26 | 27 | .container { 28 | display: flex; 29 | align-items: center; 30 | justify-content: center; 31 | flex-direction: column; 32 | margin: 0 400px; 33 | min-width: 500px; 34 | max-width: 1000px; 35 | background-image: linear-gradient(aqua, rgb(249, 146, 164)); 36 | border-radius: 20px; 37 | padding: 20px; 38 | } 39 | /* header */ 40 | 41 | .container header { 42 | display: flex; 43 | justify-content: center; 44 | align-items: center; 45 | flex-direction: column; 46 | width: 100%; 47 | margin-bottom: 20px; 48 | } 49 | 50 | header h1 { 51 | font-size: 30px; 52 | font-weight: bolder; 53 | margin-bottom: 10px; 54 | letter-spacing: 1px; 55 | word-spacing: 5px; 56 | } 57 | 58 | 59 | /* input-section */ 60 | 61 | header .input-section { 62 | width: 100%; 63 | display: flex; 64 | flex-direction: row; 65 | justify-content: space-between; 66 | align-items: center; 67 | width: 100%; 68 | height: 100%; 69 | } 70 | 71 | .input-section input { 72 | margin-right: 10px; 73 | max-width: 100%; 74 | } 75 | .max-w-xs { 76 | max-width: 20rem; 77 | } 78 | .w-full { 79 | width: 100%; 80 | } 81 | 82 | .input { 83 | border-radius: 0.5rem; 84 | height: 3rem; 85 | border-width: 2px black solid; 86 | flex-shrink: 1; 87 | padding: 0rem 1rem; 88 | font-size: 1.2rem; 89 | line-height: 2; 90 | } 91 | 92 | /* todofilters */ 93 | 94 | .todos-filter, .filters { 95 | display: flex; 96 | justify-content: space-between; 97 | align-items: center; 98 | width: 100%; 99 | height: 100%; 100 | margin-bottom: 10px; 101 | } 102 | .filters { 103 | margin-top: 10px; 104 | } 105 | 106 | 107 | .todos-list { 108 | display: flex; 109 | flex-direction: column; 110 | justify-content: space-between; 111 | align-items: center; 112 | min-height: 100%; 113 | max-height: 54vh; 114 | overflow-y: scroll; 115 | width: 100%; 116 | } 117 | 118 | .todos-list .todo-item{ 119 | display: flex; 120 | flex-direction: row; 121 | justify-content: space-between; 122 | align-items: center; 123 | padding: 10px; 124 | width: 100%; 125 | } 126 | 127 | .todo-item{ 128 | background-color: wheat; 129 | border-radius: 12px; 130 | margin-bottom: 5px; 131 | } 132 | 133 | .todo-item p{ 134 | margin-right: 10px; 135 | font-size: 1.4rem; 136 | } 137 | 138 | .todo-item .todo-actions { 139 | display: flex; 140 | flex-direction: row; 141 | align-items: center; 142 | justify-content: end; 143 | width: 100%; 144 | height: 100%; 145 | } 146 | 147 | .todo-actions button:not(:last-child){ 148 | margin-right: 10px; 149 | } 150 | 151 | .di, .ci{ 152 | pointer-events: none; 153 | } 154 | 155 | 156 | .line{ 157 | text-decoration: line-through; 158 | } 159 | 160 | 161 | /*buttons styling*/ 162 | .btn{ 163 | cursor: pointer; 164 | user-select: none; 165 | border: none; 166 | outline: none; 167 | text-align: center; 168 | border-radius: 0.5rem; 169 | height: 3rem; 170 | min-height: 3rem; 171 | text-transform: uppercase; 172 | border-width:1px; 173 | animation: button-pop var(--animation-btn,.25s)ease-in-out; 174 | flex-wrap: wrap; 175 | flex-shrink: 0; 176 | justify-content: center; 177 | align-items: center; 178 | padding-left: 1rem; 179 | padding-right: 1rem; 180 | font-size: .875rem; 181 | font-weight: 600; 182 | line-height: 1em; 183 | text-decoration-line: none; 184 | transition: .2s all cubic-bezier(.4,0,.2,1); 185 | display: inline-flex; 186 | } 187 | 188 | .btn:hover{ 189 | background-color: rgb(108, 109, 110); 190 | color: white; 191 | } 192 | 193 | 194 | .btn-add{ 195 | background-color: green; 196 | color: white 197 | } 198 | .btn-add:hover{ 199 | background-color: white; 200 | color:rgb(255, 221, 0); 201 | } 202 | 203 | .btn-success{ 204 | opacity: 1; 205 | background-color:rgb(50, 177, 50); 206 | color: white 207 | } 208 | 209 | .btn-success:hover{ 210 | background-color: white; 211 | color:rgb(50, 177, 50); 212 | } 213 | 214 | .btn-error{ 215 | opacity: 1; 216 | background-color:rgb(246, 77, 4); 217 | color: white 218 | } 219 | .btn-error:hover{ 220 | background-color: white; 221 | color:rgb(246, 77, 4); 222 | } 223 | /* 224 | dropdown*/ 225 | .dropbtn { 226 | background-color: green; 227 | color: white; 228 | padding: 10px 16px; 229 | font-size: 16px; 230 | border: none; 231 | cursor: pointer; 232 | border-radius: 5px; 233 | } 234 | 235 | .dropdown { 236 | position: relative; 237 | display: inline-block; 238 | } 239 | 240 | .dropdown-content { 241 | display: none; 242 | position: absolute; 243 | background-color: #f9f9f9; 244 | min-width: 160px; 245 | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 246 | z-index: 1; 247 | } 248 | 249 | .dropdown-content a { 250 | color: black; 251 | padding: 12px 16px; 252 | text-decoration: none; 253 | display: block; 254 | } 255 | 256 | .dropdown-content a:hover {background-color: #f1f1f1} 257 | 258 | .dropdown:hover .dropdown-content { 259 | display: block; 260 | } 261 | 262 | .dropdown:hover .dropbtn { 263 | background-color: white; 264 | color: yellowgreen; 265 | } 266 | 267 | 268 | 269 | /* Responsive */ 270 | @media only screen and (max-width: 530px) { 271 | .container { 272 | margin: 0 20px; 273 | max-width: 96%; 274 | min-width: 96%; 275 | } 276 | } 277 | --------------------------------------------------------------------------------