├── README.md ├── android-chrome-192x192.png ├── android-chrome-256x256.png ├── apple-touch-icon.png ├── browserconfig.xml ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── images ├── boy.png ├── briefcase.png ├── calendar.png ├── dumbbell.png ├── education.png ├── healthcare.png ├── logo.png ├── saving.png ├── shopping.png ├── sun.png └── web-design.png ├── index.html ├── mstile-150x150.png ├── preview.png ├── safari-pinned-tab.svg ├── script.js ├── site.webmanifest └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Todo-List-App 2 | ## [Watch it on youtube](https://youtu.be/u_ocJEv6c4Q) 3 | ### Building a Todo List App from Scratch | HTML, CSS, JavaScript 4 | 5 | 💙 Join the channel to see more videos like this. [Open Source Coding](https://www.youtube.com/@opensourcecoding) 6 | 7 | ![preview img](/preview.png) 8 | -------------------------------------------------------------------------------- /android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/Todo-List-App/47446fc610a756f52aad9aaabce654b5e6643c02/android-chrome-192x192.png -------------------------------------------------------------------------------- /android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/Todo-List-App/47446fc610a756f52aad9aaabce654b5e6643c02/android-chrome-256x256.png -------------------------------------------------------------------------------- /apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/Todo-List-App/47446fc610a756f52aad9aaabce654b5e6643c02/apple-touch-icon.png -------------------------------------------------------------------------------- /browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #2d89ef 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/Todo-List-App/47446fc610a756f52aad9aaabce654b5e6643c02/favicon-16x16.png -------------------------------------------------------------------------------- /favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/Todo-List-App/47446fc610a756f52aad9aaabce654b5e6643c02/favicon-32x32.png -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/Todo-List-App/47446fc610a756f52aad9aaabce654b5e6643c02/favicon.ico -------------------------------------------------------------------------------- /images/boy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/Todo-List-App/47446fc610a756f52aad9aaabce654b5e6643c02/images/boy.png -------------------------------------------------------------------------------- /images/briefcase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/Todo-List-App/47446fc610a756f52aad9aaabce654b5e6643c02/images/briefcase.png -------------------------------------------------------------------------------- /images/calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/Todo-List-App/47446fc610a756f52aad9aaabce654b5e6643c02/images/calendar.png -------------------------------------------------------------------------------- /images/dumbbell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/Todo-List-App/47446fc610a756f52aad9aaabce654b5e6643c02/images/dumbbell.png -------------------------------------------------------------------------------- /images/education.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/Todo-List-App/47446fc610a756f52aad9aaabce654b5e6643c02/images/education.png -------------------------------------------------------------------------------- /images/healthcare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/Todo-List-App/47446fc610a756f52aad9aaabce654b5e6643c02/images/healthcare.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/Todo-List-App/47446fc610a756f52aad9aaabce654b5e6643c02/images/logo.png -------------------------------------------------------------------------------- /images/saving.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/Todo-List-App/47446fc610a756f52aad9aaabce654b5e6643c02/images/saving.png -------------------------------------------------------------------------------- /images/shopping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/Todo-List-App/47446fc610a756f52aad9aaabce654b5e6643c02/images/shopping.png -------------------------------------------------------------------------------- /images/sun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/Todo-List-App/47446fc610a756f52aad9aaabce654b5e6643c02/images/sun.png -------------------------------------------------------------------------------- /images/web-design.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/Todo-List-App/47446fc610a756f52aad9aaabce654b5e6643c02/images/web-design.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Javascript Todo-list App 15 | 19 | 23 | 24 | 25 |
26 |
27 |
28 |
29 |
30 | 38 | 43 | 44 |
45 |
46 |
47 |

Hello John

48 |

Today you have 5 tasks

49 |
50 |
51 |
52 | 53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | sun 61 |
62 |

Personal

63 |

5 Tasks

64 |
65 |
66 |
67 |
68 | 76 | 81 | 82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 | 99 | 104 | 105 |
106 |
107 | 115 | 120 | 121 |
122 |
123 |
124 | 125 |
126 |

8 tasks

127 |

Personal

128 |
129 |
130 |
131 |
132 |
133 | 153 |
154 | 162 | 167 | 168 |
169 |
170 |
171 |
172 |
173 |
174 | 182 | 187 | 188 |
189 |
190 |
191 |
192 |

Add Task

193 |
194 | 195 | 196 |
197 |
198 | 199 | 200 |
201 |
202 | 203 | 204 |
205 |
206 |
207 | 208 | 209 | 210 | 211 | -------------------------------------------------------------------------------- /mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/Todo-List-App/47446fc610a756f52aad9aaabce654b5e6643c02/mstile-150x150.png -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opensource-coding/Todo-List-App/47446fc610a756f52aad9aaabce654b5e6643c02/preview.png -------------------------------------------------------------------------------- /safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.14, written by Peter Selinger 2001-2017 9 | 10 | 12 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | let categories = [ 2 | { 3 | title: "Personal", 4 | img: "boy.png", 5 | }, 6 | { 7 | title: "Work", 8 | img: "briefcase.png", 9 | }, 10 | { 11 | title: "Shopping", 12 | img: "shopping.png", 13 | }, 14 | { 15 | title: "Coding", 16 | img: "web-design.png", 17 | }, 18 | { 19 | title: "Health", 20 | img: "healthcare.png", 21 | }, 22 | { 23 | title: "Fitness", 24 | img: "dumbbell.png", 25 | }, 26 | { 27 | title: "Education", 28 | img: "education.png", 29 | }, 30 | { 31 | title: "Finance", 32 | img: "saving.png", 33 | }, 34 | ]; 35 | 36 | let tasks = [ 37 | { 38 | id: 1, 39 | task: "Go to market", 40 | category: "Shopping", 41 | completed: false, 42 | }, 43 | { 44 | id: 2, 45 | task: "Read a chapter of a book", 46 | category: "Personal", 47 | completed: false, 48 | }, 49 | { 50 | id: 3, 51 | task: "Prepare presentation for meeting", 52 | category: "Work", 53 | completed: false, 54 | }, 55 | { 56 | id: 4, 57 | task: "Complete coding challenge", 58 | category: "Coding", 59 | completed: false, 60 | }, 61 | { 62 | id: 5, 63 | task: "Take a 30-minute walk", 64 | category: "Health", 65 | completed: false, 66 | }, 67 | { 68 | id: 6, 69 | task: "Do a 20-minute HIIT workout", 70 | category: "Fitness", 71 | completed: false, 72 | }, 73 | { 74 | id: 7, 75 | task: "Watch an educational video online", 76 | category: "Education", 77 | completed: false, 78 | }, 79 | { 80 | id: 8, 81 | task: "Review monthly budget", 82 | category: "Finance", 83 | completed: false, 84 | }, 85 | { 86 | id: 9, 87 | task: "Buy groceries for the week", 88 | category: "Shopping", 89 | completed: false, 90 | }, 91 | { 92 | id: 10, 93 | task: "Write in a journal", 94 | category: "Personal", 95 | completed: false, 96 | }, 97 | { 98 | id: 11, 99 | task: "Send follow-up emails", 100 | category: "Work", 101 | completed: false, 102 | }, 103 | { 104 | id: 12, 105 | task: "Work on a coding side project", 106 | category: "Coding", 107 | completed: false, 108 | }, 109 | { 110 | id: 13, 111 | task: "Try a new healthy recipe", 112 | category: "Health", 113 | completed: false, 114 | }, 115 | { 116 | id: 14, 117 | task: "Attend a yoga class", 118 | category: "Fitness", 119 | completed: false, 120 | }, 121 | { 122 | id: 15, 123 | task: "Read an article about a new topic", 124 | category: "Education", 125 | completed: false, 126 | }, 127 | { 128 | id: 16, 129 | task: "Set up automatic bill payments", 130 | category: "Finance", 131 | completed: false, 132 | }, 133 | // Additional tasks for each category 134 | { 135 | id: 17, 136 | task: "Buy new clothes", 137 | category: "Shopping", 138 | completed: false, 139 | }, 140 | { 141 | id: 18, 142 | task: "Meditate for 10 minutes", 143 | category: "Personal", 144 | completed: false, 145 | }, 146 | { 147 | id: 19, 148 | task: "Prepare agenda for team meeting", 149 | category: "Work", 150 | completed: false, 151 | }, 152 | { 153 | id: 20, 154 | task: "Debug a software issue", 155 | category: "Coding", 156 | completed: false, 157 | }, 158 | { 159 | id: 21, 160 | task: "Try a new recipe for lunch", 161 | category: "Health", 162 | completed: false, 163 | }, 164 | { 165 | id: 22, 166 | task: "Go for a run", 167 | category: "Fitness", 168 | completed: false, 169 | }, 170 | { 171 | id: 23, 172 | task: "Learn a new language online", 173 | category: "Education", 174 | completed: false, 175 | }, 176 | { 177 | id: 24, 178 | task: "Read about history", 179 | category: "Education", 180 | completed: false, 181 | }, 182 | { 183 | id: 25, 184 | task: "Review investment portfolio", 185 | category: "Finance", 186 | completed: false, 187 | }, 188 | // Add more tasks for each category as desired 189 | ]; 190 | 191 | // Define functions 192 | const saveLocal = () => { 193 | localStorage.setItem("tasks", JSON.stringify(tasks)); 194 | }; 195 | 196 | const getLocal = () => { 197 | const tasksLocal = JSON.parse(localStorage.getItem("tasks")); 198 | if (tasksLocal) { 199 | tasks = tasksLocal; 200 | } 201 | }; 202 | 203 | const toggleScreen = () => { 204 | screenWrapper.classList.toggle("show-category"); 205 | }; 206 | 207 | const updateTotals = () => { 208 | const categoryTasks = tasks.filter( 209 | (task) => 210 | task.category.toLowerCase() === selectedCategory.title.toLowerCase() 211 | ); 212 | numTasks.innerHTML = `${categoryTasks.length} Tasks`; 213 | totalTasks.innerHTML = tasks.length; 214 | }; 215 | 216 | const renderCategories = () => { 217 | categoriesContainer.innerHTML = ""; 218 | categories.forEach((category) => { 219 | const categoryTasks = tasks.filter( 220 | (task) => task.category.toLowerCase() === category.title.toLowerCase() 221 | ); 222 | const div = document.createElement("div"); 223 | div.classList.add("category"); 224 | div.addEventListener("click", () => { 225 | screenWrapper.classList.toggle("show-category"); 226 | selectedCategory = category; 227 | updateTotals(); 228 | categoryTitle.innerHTML = category.title; 229 | categoryImg.src = `images/${category.img}`; 230 | renderTasks(); 231 | }); 232 | 233 | div.innerHTML = ` 234 |
235 | ${category.title} 238 |
239 |

${category.title}

240 |

${categoryTasks.length} Tasks

241 |
242 |
243 |
244 |
245 | 253 | 258 | 259 |
260 |
261 | `; 262 | 263 | categoriesContainer.appendChild(div); 264 | }); 265 | }; 266 | 267 | const renderTasks = () => { 268 | tasksContainer.innerHTML = ""; 269 | const categoryTasks = tasks.filter( 270 | (task) => 271 | task.category.toLowerCase() === selectedCategory.title.toLowerCase() 272 | ); 273 | if (categoryTasks.length === 0) { 274 | tasksContainer.innerHTML = `

No tasks added for this category

`; 275 | } else { 276 | categoryTasks.forEach((task) => { 277 | const div = document.createElement("div"); 278 | div.classList.add("task-wrapper"); 279 | const label = document.createElement("label"); 280 | label.classList.add("task"); 281 | label.setAttribute("for", task.id); 282 | const checkbox = document.createElement("input"); 283 | checkbox.type = "checkbox"; 284 | checkbox.id = task.id; 285 | checkbox.checked = task.completed; 286 | checkbox.addEventListener("change", () => { 287 | const index = tasks.findIndex((t) => t.id === task.id); 288 | tasks[index].completed = !tasks[index].completed; 289 | saveLocal(); 290 | }); 291 | div.innerHTML = ` 292 |
293 | 301 | 306 | 307 |
308 | `; 309 | label.innerHTML = ` 310 | 319 | 324 | 325 | 326 |

${task.task}

327 | `; 328 | label.prepend(checkbox); 329 | div.prepend(label); 330 | tasksContainer.appendChild(div); 331 | 332 | const deleteBtn = div.querySelector(".delete"); 333 | deleteBtn.addEventListener("click", () => { 334 | const index = tasks.findIndex((t) => t.id === task.id); 335 | tasks.splice(index, 1); 336 | saveLocal(); 337 | renderTasks(); 338 | }); 339 | }); 340 | 341 | renderCategories(); 342 | updateTotals(); 343 | } 344 | }; 345 | 346 | const toggleAddTaskForm = () => { 347 | addTaskWrapper.classList.toggle("active"); 348 | blackBackdrop.classList.toggle("active"); 349 | addTaskBtn.classList.toggle("active"); 350 | }; 351 | 352 | const addTask = (e) => { 353 | e.preventDefault(); 354 | const task = taskInput.value; 355 | const category = categorySelect.value; 356 | 357 | if (task === "") { 358 | alert("Please enter a task"); 359 | } else { 360 | const newTask = { 361 | id: tasks.length + 1, 362 | task, 363 | category, 364 | completed: false, 365 | }; 366 | taskInput.value = ""; 367 | tasks.push(newTask); 368 | saveLocal(); 369 | toggleAddTaskForm(); 370 | renderTasks(); 371 | } 372 | }; 373 | 374 | // Initialize variables and DOM elements 375 | let selectedCategory = categories[0]; 376 | const categoriesContainer = document.querySelector(".categories"); 377 | const screenWrapper = document.querySelector(".wrapper"); 378 | const menuBtn = document.querySelector(".menu-btn"); 379 | const backBtn = document.querySelector(".back-btn"); 380 | const tasksContainer = document.querySelector(".tasks"); 381 | const numTasks = document.getElementById("num-tasks"); 382 | const categoryTitle = document.getElementById("category-title"); 383 | const categoryImg = document.getElementById("category-img"); 384 | const categorySelect = document.getElementById("category-select"); 385 | const addTaskWrapper = document.querySelector(".add-task"); 386 | const addTaskBtn = document.querySelector(".add-task-btn"); 387 | const taskInput = document.getElementById("task-input"); 388 | const blackBackdrop = document.querySelector(".black-backdrop"); 389 | const addBtn = document.querySelector(".add-btn"); 390 | const cancelBtn = document.querySelector(".cancel-btn"); 391 | const totalTasks = document.getElementById("total-tasks"); 392 | 393 | // Attach event listeners 394 | menuBtn.addEventListener("click", toggleScreen); 395 | backBtn.addEventListener("click", toggleScreen); 396 | addTaskBtn.addEventListener("click", toggleAddTaskForm); 397 | blackBackdrop.addEventListener("click", toggleAddTaskForm); 398 | addBtn.addEventListener("click", addTask); 399 | cancelBtn.addEventListener("click", toggleAddTaskForm); 400 | 401 | // Render initial state 402 | getLocal(); 403 | renderTasks(); 404 | categories.forEach((category) => { 405 | const option = document.createElement("option"); 406 | option.value = category.title.toLowerCase(); 407 | option.textContent = category.title; 408 | categorySelect.appendChild(option); 409 | }); 410 | -------------------------------------------------------------------------------- /site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Todo List", 3 | "short_name": "todo-list", 4 | "icons": [ 5 | { 6 | "src": "android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900); 2 | 3 | ::-webkit-scrollbar { 4 | width: 0; 5 | } 6 | 7 | * { 8 | margin: 0; 9 | padding: 0; 10 | box-sizing: border-box; 11 | } 12 | 13 | body { 14 | min-height: 100vh; 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | color: #2e2e2e; 19 | font-family: "Inter", sans-serif; 20 | background-color: #fff; 21 | } 22 | 23 | .wrapper { 24 | position: relative; 25 | height: 100vh; 26 | width: 100%; 27 | overflow: hidden; 28 | padding: 30px 0; 29 | display: flex; 30 | } 31 | 32 | @media (min-width:768px) { 33 | .wrapper { 34 | height: 50rem; 35 | width: 25rem; 36 | border-radius: 40px; 37 | border: 10px solid #2e2e2e; 38 | } 39 | } 40 | 41 | .wrapper .screen { 42 | min-width: 100%; 43 | flex: 1; 44 | transition: all 0.3s; 45 | } 46 | 47 | .screen-backdrop { 48 | width: 135%; 49 | height: 25rem; 50 | position: absolute; 51 | top: 0; 52 | left: 50%; 53 | transform: translateX(-50%); 54 | border-radius: 0 0 50% 50%; 55 | background-color: #39a6f0; 56 | z-index: -1; 57 | transition: all 0.3s; 58 | } 59 | 60 | .wrapper.show-category .home-screen { 61 | transform: translateX(-100%); 62 | } 63 | 64 | .wrapper.show-category .category-screen { 65 | transform: translateX(-100%); 66 | } 67 | 68 | .wrapper.show-category .screen-backdrop { 69 | transform: translate(-50%, -60%) 70 | } 71 | 72 | .head-wrapper { 73 | padding: 0 30px; 74 | } 75 | 76 | .menu-btn { 77 | width: 2rem; 78 | cursor: pointer; 79 | color: #ffffff; 80 | } 81 | 82 | .welcome { 83 | display: flex; 84 | justify-content: space-between; 85 | margin-top: 20px; 86 | color: #ffffff; 87 | } 88 | 89 | .welcome h1 { 90 | font-size: 1.5rem; 91 | } 92 | 93 | .welcome p { 94 | font-weight: 500; 95 | } 96 | 97 | .welcome .img { 98 | position: relative; 99 | } 100 | 101 | .welcome .img .backdrop { 102 | position: absolute; 103 | top: 0; 104 | left: 50%; 105 | transform: translateX(-50%); 106 | width: 3.8rem; 107 | height: 4rem; 108 | border-radius: 50%; 109 | background-color: #e5e7fd; 110 | z-index: -1; 111 | } 112 | 113 | .welcome .img img { 114 | width: 5rem; 115 | } 116 | 117 | .categories-wrapper { 118 | margin-top: 1rem; 119 | padding: 0 30px; 120 | height: calc(100% - 8rem); 121 | padding-bottom: 20px; 122 | overflow: auto; 123 | } 124 | 125 | .categories { 126 | padding-top: 1rem; 127 | display: flex; 128 | flex-direction: column; 129 | gap: 1rem; 130 | } 131 | 132 | .category { 133 | background: #fff; 134 | border-radius: 0.5rem; 135 | padding: 1.5rem 1rem; 136 | cursor: pointer; 137 | display: flex; 138 | justify-content: space-between; 139 | box-shadow: 0 10px 20px 5px #00000023; 140 | transition: all 0.3s; 141 | 142 | } 143 | 144 | .category:hover { 145 | transform: translateY(-5px); 146 | box-shadow: 0 10px 20px 5px #00000040; 147 | } 148 | 149 | .category .left { 150 | display: flex; 151 | gap: 1.5rem; 152 | align-items: center; 153 | } 154 | 155 | .category .left img { 156 | width: 3rem; 157 | } 158 | 159 | .category .content h1 { 160 | font-size: 1.5rem; 161 | } 162 | 163 | .category .content p { 164 | color: #2e2e2e; 165 | font-size: 0.8rem; 166 | opacity: 0.6; 167 | } 168 | 169 | .category .options { 170 | opacity: 0; 171 | visibility: hidden; 172 | transition: all 0.3s; 173 | } 174 | 175 | .category:hover .options { 176 | opacity: 1; 177 | visibility: visible; 178 | } 179 | 180 | .category .toggle-btn { 181 | width: 2rem; 182 | cursor: pointer; 183 | opacity: 0.6; 184 | } 185 | 186 | .category .toggle-btn:hover { 187 | opacity: 1; 188 | } 189 | 190 | 191 | /* Category Screen */ 192 | .category-screen .head-wrapper { 193 | display: flex; 194 | justify-content: space-between; 195 | align-items: center; 196 | } 197 | 198 | .category-screen .head-wrapper svg { 199 | width: 2rem; 200 | cursor: pointer; 201 | color: #fff; 202 | } 203 | 204 | .category-details { 205 | padding: 0 30px; 206 | margin-top: 7rem; 207 | display: flex; 208 | align-items: center; 209 | gap: 1rem; 210 | } 211 | 212 | .category-details img { 213 | width: 4rem; 214 | } 215 | 216 | .category-details .details p { 217 | opacity: 0.6; 218 | } 219 | 220 | /* tasks */ 221 | .tasks-wrapper { 222 | padding: 0 30px; 223 | margin-top: 1rem; 224 | height: calc(100% - 12rem); 225 | padding-bottom: 20px; 226 | overflow: auto; 227 | } 228 | 229 | .tasks { 230 | padding-top: 1rem; 231 | display: flex; 232 | flex-direction: column; 233 | gap: 1rem; 234 | } 235 | 236 | .task-wrapper { 237 | display: flex; 238 | justify-content: space-between; 239 | align-items: center; 240 | } 241 | 242 | 243 | 244 | .task { 245 | display: flex; 246 | gap: 0.5rem; 247 | align-items: center; 248 | font-size: 0.8rem; 249 | font-weight: 500; 250 | width: max-content; 251 | cursor: pointer; 252 | } 253 | 254 | 255 | .task input { 256 | display: none; 257 | } 258 | 259 | .task .checkmark { 260 | width: 1rem; 261 | height: 1rem; 262 | border-radius: 2px; 263 | border: 1px solid #2e2e2e; 264 | display: flex; 265 | justify-content: center; 266 | align-items: center; 267 | } 268 | 269 | .task .checkmark svg { 270 | width: 1rem; 271 | color: #2e2e2e; 272 | opacity: 0; 273 | transition: all 0.3s; 274 | } 275 | 276 | .task:hover .checkmark svg { 277 | opacity: 1; 278 | } 279 | 280 | .task .checkmark svg path { 281 | stroke-width: 3; 282 | } 283 | 284 | .task input:checked~.checkmark { 285 | background-color: #2e2e2e; 286 | } 287 | 288 | .task input:checked~.checkmark svg { 289 | opacity: 1; 290 | color: #fff; 291 | } 292 | 293 | .task input:checked~p { 294 | text-decoration: line-through; 295 | opacity: 0.6; 296 | } 297 | 298 | .task-wrapper .delete { 299 | min-width: 2rem; 300 | height: 2rem; 301 | padding: 0.5rem; 302 | border-radius: 50%; 303 | color: #2e2e2e; 304 | cursor: pointer; 305 | background-color: rgba(0, 0, 0, 0.031); 306 | opacity: 0; 307 | visibility: hidden; 308 | transition: all 0.3s; 309 | } 310 | 311 | .task-wrapper:hover .delete { 312 | opacity: 1; 313 | visibility: visible; 314 | } 315 | 316 | .task-wrapper .delete:hover { 317 | color: red; 318 | background-color: rgba(0, 0, 0, 0.1); 319 | } 320 | 321 | .no-tasks { 322 | margin-top: 5rem; 323 | text-align: center; 324 | font-size: 1.5rem; 325 | opacity: 0.6; 326 | } 327 | 328 | /* Add Task */ 329 | .add-task-btn { 330 | position: absolute; 331 | bottom: 1rem; 332 | right: 1rem; 333 | width: 3rem; 334 | height: 3rem; 335 | border-radius: 50%; 336 | cursor: pointer; 337 | display: flex; 338 | align-items: center; 339 | justify-content: center; 340 | background-color: #39a6f0; 341 | transition: all 0.3s; 342 | } 343 | 344 | .add-task-btn:hover { 345 | transform: scale(1.1); 346 | } 347 | 348 | .add-task-btn.active { 349 | z-index: 1; 350 | bottom: 20rem; 351 | transform: rotate(45deg); 352 | } 353 | 354 | .add-task-btn svg { 355 | width: 2rem; 356 | color: #fff; 357 | } 358 | 359 | .add-task { 360 | position: absolute; 361 | bottom: -100%; 362 | left: 0; 363 | width: 100%; 364 | padding: 20px 30px; 365 | transition: all 0.3s; 366 | } 367 | 368 | .add-task.active { 369 | bottom: 0; 370 | } 371 | 372 | .add-task .heading { 373 | font-size: 1.5rem; 374 | margin-bottom: 1rem; 375 | } 376 | 377 | .input-group { 378 | position: relative; 379 | margin-bottom: 20px; 380 | } 381 | 382 | .input-group input, 383 | .input-group label { 384 | display: block; 385 | width: 100%; 386 | } 387 | 388 | .input-group input, 389 | .input-group select { 390 | width: 100%; 391 | border: 1px solid #ccc; 392 | border-radius: 5px; 393 | padding: 10px; 394 | font-size: 16px; 395 | } 396 | 397 | .input-group label { 398 | width: max-content; 399 | padding: 0 5px; 400 | margin-top: 5px; 401 | font-size: 14px; 402 | color: #666; 403 | margin-bottom: 5px; 404 | } 405 | 406 | .btns { 407 | display: flex; 408 | gap: 1rem; 409 | justify-content: flex-end; 410 | align-items: center; 411 | } 412 | 413 | .btns button { 414 | padding: 10px 20px; 415 | border-radius: 5px; 416 | border: none; 417 | cursor: pointer; 418 | font-size: 14px; 419 | font-weight: 600; 420 | transition: all 0.3s; 421 | z-index: 1; 422 | } 423 | 424 | button.add-btn { 425 | background-color: #39a6f0; 426 | color: #fff 427 | } 428 | 429 | .add-task-backdrop { 430 | position: absolute; 431 | bottom: 0; 432 | left: 50%; 433 | transform: translateX(-50%); 434 | width: 135%; 435 | height: 20rem; 436 | border-radius: 50% 50% 0 0; 437 | background-color: #fff; 438 | } 439 | 440 | .black-backdrop { 441 | position: absolute; 442 | top: 0; 443 | left: 0; 444 | width: 100%; 445 | height: 100%; 446 | backdrop-filter: blur(5px); 447 | background-color: #00000023; 448 | opacity: 0; 449 | visibility: hidden; 450 | transition: all 0.3s; 451 | } 452 | 453 | .black-backdrop.active { 454 | opacity: 1; 455 | visibility: visible; 456 | } --------------------------------------------------------------------------------