To-Do List

292 | Developed and Designed By Kritika Gupta | © All Rights Reserved 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // Creating instances of document objects 2 | const taskList = document.getElementById("taskList"); 3 | const dueDateInput = document.getElementById("dueDate"); 4 | const priorityInput = document.getElementById("priority"); 5 | const submitBtn = document.getElementById("submitBtn"); 6 | const editTaskBtn = document.getElementById("editTask"); 7 | const tasksHeading = document.getElementById("heading-tasks"); 8 | const searchBar = document.getElementById("searchBar"); 9 | const modeToggleBtn = document.getElementById("modeToggle"); 10 | const checkboxes = document.querySelectorAll(".form-check-input"); 11 | let editItem = null; 12 | const tasksWithPriority = []; 13 | let tasksTitleArray = []; 14 | const priorityColors = { 15 | High: "task-priority-High", 16 | Medium: "task-priority-Medium", 17 | Low: "task-priority-Low", 18 | Completed: "task-completed", 19 | }; 20 | 21 | const priorityValues = { 22 | High: 3, 23 | Medium: 2, 24 | Low: 1, 25 | }; 26 | 27 | // Adding Event Listeners to Document Objects [buttons, text fields, dropdown lists] 28 | editTaskBtn.addEventListener("click", (e) => { 29 | handleEditClick(e); 30 | }); 31 | submitBtn.addEventListener("click", (e) => { 32 | addItem(e); 33 | }); 34 | taskList.addEventListener("click", handleItemClick); 35 | modeToggleBtn.addEventListener("click", toggleMode); 36 | checkboxes.forEach((checkbox) => { 37 | checkbox.addEventListener("change", markAsComplete); 38 | }); 39 | 40 | flatpickr(dueDateInput, { 41 | enableTime: false, 42 | dateFormat: "Y-m-d", 43 | }); 44 | 45 | //settibng up default theme 46 | function init() { 47 | const searchBar = document.getElementById("searchBar"); 48 | searchBar.addEventListener("input", handleSearch); 49 | loadTasksFromLocalStorage(); 50 | tasksCheck(); 51 | } 52 | 53 | //search logic 54 | function handleSearch() { 55 | const searchTerm = searchBar.value.toLowerCase(); 56 | const tasks = document.querySelectorAll(".list-group-item"); 57 | tasks.forEach((task) => { 58 | const taskTitle = task.childNodes[1].textContent.trim().toLowerCase(); 59 | if (taskTitle.includes(searchTerm)) { 60 | task.style.display = "block"; 61 | } else { 62 | task.style.display = "none"; 63 | } 64 | }); 65 | } 66 | 67 | //logic to check whether no task is present and hide some buttons 68 | function tasksCheck() { 69 | const tasks = taskList.children; 70 | if (tasks.length === 0) { 71 | tasksHeading.classList.toggle("hidden"); 72 | searchBar.classList.toggle("hidden"); 73 | document.querySelector(".clear_btn").style.display = "none"; 74 | document.querySelector(".dropdown").style.display = "none"; 75 | } 76 | } 77 | 78 | //this gets called after 'edit' button, fills text fields with data to be edited 79 | function handleEditItem(e) { 80 | e.preventDefault(); 81 | editTaskBtn.style.display = "inline"; 82 | submitBtn.style.display = "none"; 83 | const taskTitle = e.target.parentElement.childNodes[1].textContent.trim(); 84 | console.log(e.target.parentElement.childNodes); 85 | const taskDescription = e.target.parentElement.childNodes[4].textContent 86 | .trim() 87 | .replace("Description:", ""); 88 | document.getElementById("item").value = taskTitle; 89 | document.getElementById("description").value = taskDescription; 90 | document.getElementById("maintitle").innerText = "Edit your tasks below :"; 91 | editItem = e.target; 92 | document.documentElement.scrollTop = 0; 93 | document.getElementById("item").focus(); 94 | } 95 | 96 | //actual logic after editing a task and for adding a task (gets called after edit button click, onChnage text fileds, date, priority) 97 | function handleEditClick(e) { 98 | e.preventDefault(); 99 | const itemInput = document.getElementById("item"); 100 | const dueDateInput = document.getElementById("dueDate"); 101 | const descriptionInput = document.getElementById("description"); 102 | const editedItemText = itemInput.value; 103 | const editedDescriptionText = descriptionInput.value; 104 | const editedDueDate = new Date(dueDateInput.value); 105 | const currentDate = new Date().toISOString().split("T")[0]; 106 | const editedPriority = document.getElementById("priority").value; 107 | 108 | //check if all fields are filled [basic validation] 109 | if (!editedItemText.trim()) { 110 | displayErrorMessage("Task not entered"); 111 | return false; 112 | } 113 | 114 | if (!editedItemText) { 115 | displayErrorMessage("Title must not be empty!!!."); 116 | return false; 117 | } 118 | 119 | if (editedDueDate < new Date(currentDate)) { 120 | displayErrorMessage("Due date has already passed !!!"); 121 | return false; 122 | } 123 | 124 | if (!editedPriority) { 125 | displayErrorMessage("Please select priority"); 126 | return false; 127 | } 128 | //[basic validation ends] 129 | 130 | //actual manuplation of data 131 | const listItem = editItem.parentElement; 132 | listItem.childNodes[1].textContent = editedItemText; 133 | listItem.childNodes[4].textContent = editedDescriptionText.trim() 134 | ? "Description: " + editedDescriptionText 135 | : ""; 136 | listItem.childNodes[7].textContent = editedPriority; 137 | if (editedDueDate >= new Date(currentDate)) { 138 | listItem.childNodes[6].textContent = `Due Date:${dueDateInput.value}`; 139 | } 140 | const capitalizedPriority = 141 | editedPriority.charAt(0).toUpperCase() + 142 | editedPriority.slice(1).toLowerCase(); 143 | listItem.className = `list-group-item card shadow mb-4 bg-transparent ${priorityColors[capitalizedPriority]}`; 144 | displaySuccessMessage("Task edited successfully !!!"); 145 | editItem = null; 146 | itemInput.value = ""; 147 | descriptionInput.value = ""; 148 | dueDateInput.value = ""; 149 | document.getElementById("maintitle").innerText = "Add your tasks below :"; 150 | editTaskBtn.style.display = "none"; 151 | submitBtn.style.display = "inline"; 152 | saveTasksToLocalStorage(); 153 | } 154 | 155 | //Voice handled adding task logic [start] 156 | document.addEventListener("DOMContentLoaded", function () { 157 | const recognition = new (window.SpeechRecognition || 158 | window.webkitSpeechRecognition)(); 159 | recognition.lang = "en-US"; 160 | recognition.interimResults = false; 161 | 162 | let isListening = false; 163 | const voiceCommandButton = document.getElementById("voice-command-button"); 164 | voiceCommandButton.addEventListener("click", function () { 165 | if (isListening) { 166 | recognition.stop(); 167 | isListening = false; 168 | voiceCommandButton.innerHTML = ''; 169 | } else { 170 | recognition.start(); 171 | isListening = true; 172 | voiceCommandButton.innerHTML = ''; 173 | } 174 | }); 175 | 176 | recognition.onresult = function (event) { 177 | const transcript = event.results[0][0].transcript; 178 | handleVoiceCommand(transcript); 179 | }; 180 | 181 | recognition.onend = function () { 182 | isListening = false; 183 | voiceCommandButton.innerHTML = ''; 184 | }; 185 | 186 | function handleVoiceCommand(command) { 187 | console.log("Recognized Command:", command); 188 | const commandParts = command.split(" "); 189 | 190 | if (command.length >= 4) { 191 | if (command.toLowerCase().includes("add")) { 192 | const titleIndex = commandParts.indexOf("add") + 1; 193 | const dueIndex = commandParts.indexOf("due"); 194 | const dateIndex = commandParts.indexOf("date"); 195 | const priorityIndex = commandParts.indexOf("priority"); 196 | if ( 197 | titleIndex < dueIndex && 198 | dueIndex < dateIndex && 199 | dateIndex < priorityIndex 200 | ) { 201 | const taskTitle = commandParts.slice(titleIndex, dueIndex).join(" "); 202 | const dueDate = commandParts 203 | .slice(dateIndex + 1, priorityIndex) 204 | .join(" "); 205 | const priority = commandParts[priorityIndex + 1]; 206 | addTask(taskTitle, dueDate, priority); 207 | return; 208 | } 209 | } else if ( 210 | command.toLowerCase().includes("edit") && 211 | command.toLowerCase().includes("task") 212 | ) { 213 | const editIndex = commandParts.indexOf("edit"); 214 | const taskIndex = commandParts.indexOf("task"); 215 | const toIndex = commandParts.indexOf("to"); 216 | const dueDateIndex = commandParts.indexOf("due"); 217 | const priorityIndex = commandParts.indexOf("priority"); 218 | if ( 219 | editIndex !== -1 && 220 | taskIndex !== -1 && 221 | toIndex !== -1 && 222 | dueDateIndex !== -1 && 223 | priorityIndex !== -1 && 224 | toIndex > taskIndex && 225 | dueDateIndex > toIndex && 226 | priorityIndex > dueDateIndex && 227 | priorityIndex < commandParts.length - 1 228 | ) { 229 | const oldTitle = commandParts.slice(taskIndex + 1, toIndex).join(" "); 230 | const newTitle = commandParts 231 | .slice(toIndex + 1, dueDateIndex) 232 | .join(" "); 233 | const newdueDate = commandParts.slice( 234 | dueDateIndex + 2, 235 | dueDateIndex + 4 236 | ); 237 | const newpriority = capitalizeFirstLetter( 238 | commandParts[priorityIndex + 1] 239 | ); 240 | 241 | function capitalizeFirstLetter(string) { 242 | return string.charAt(0).toUpperCase() + string.slice(1); 243 | } 244 | editTask(oldTitle, newTitle, newdueDate, newpriority); 245 | return; 246 | } 247 | } else if (command.toLowerCase().includes("delete")) { 248 | const titleIndex = commandParts.indexOf("task") + 1; 249 | const taskTitle = commandParts.slice(titleIndex).join(" "); 250 | deleteTask(taskTitle); 251 | } else { 252 | displayErrorMessage("Invalid voice command format."); 253 | } 254 | } 255 | } 256 | //Voice handled adding task logic [end] 257 | 258 | function deleteTask(taskTitle) { 259 | const taskElement = findTaskElement(taskTitle); 260 | if (taskElement) { 261 | taskElement.remove(); 262 | saveTasksToLocalStorage(); 263 | displaySuccessMessage(`Task "${taskTitle}" deleted successfully.`); 264 | } else { 265 | displayErrorMessage(`Task "${taskTitle}" not found.`); 266 | } 267 | } 268 | 269 | //Setting edited data to below cards components 270 | function editTask( 271 | oldTitle, 272 | newTitle, 273 | newdueDate, 274 | newpriority, 275 | newDescription 276 | ) { 277 | const taskElement = findTaskElement(oldTitle); 278 | if (taskElement) { 279 | const dueDateElement = taskElement.querySelector("#task-dueDate"); 280 | const priorityElement = taskElement.querySelector("#task-priority"); 281 | const descElement = taskElement.querySelector("#description-at"); 282 | const titleTextNode = taskElement.childNodes[1]; 283 | titleTextNode.textContent = titleTextNode.textContent.replace( 284 | oldTitle, 285 | newTitle 286 | ); 287 | //updating fields data 288 | if (dueDateElement) { 289 | dueDateElement.textContent = `Due Date: ${newdueDate}`; 290 | dueDateElement.id = "task-dueDate"; 291 | } 292 | if (priorityElement) { 293 | priorityElement.textContent = newpriority; 294 | priorityElement.id = "task-priority"; 295 | } 296 | if (descElement) { 297 | descElement.textContent = newDescription; 298 | descElement.id = "task-description"; 299 | } 300 | 301 | //redesplaying task data in cards 302 | displayTaskDetails(taskElement); 303 | saveTasksToLocalStorage(); 304 | displaySuccessMessage(`Task "${oldTitle}" edited successfully.`); 305 | } else { 306 | displayErrorMessage(`Task "${oldTitle}" not found.`); 307 | } 308 | } 309 | 310 | //returns the instance of task to be deleted or edited 311 | function findTaskElement(taskTitle) { 312 | const tasks = document.querySelectorAll(".list-group-item"); 313 | for (const task of tasks) { 314 | const title = task.childNodes[1].textContent.trim().toLowerCase(); 315 | if (title === taskTitle.toLowerCase()) { 316 | return task; 317 | } 318 | } 319 | return null; 320 | } 321 | 322 | //logic to add task, can be used for voice commands only, (need to be update this function!) 323 | function addTask(taskTitle, dueDate, priority) { 324 | const todoList = document.getElementById("taskList"); 325 | const existingTasks = todoList.querySelectorAll("li"); 326 | existingTasks.forEach((item) => 327 | console.log(item.textContent.trim().toLowerCase()) 328 | ); 329 | const taskExists = Array.from(existingTasks).some( 330 | (item) => 331 | item.textContent.trim().toLowerCase() === taskTitle.trim().toLowerCase() 332 | ); 333 | 334 | if (taskExists) { 335 | displayErrorMessage("Task already exists !!!"); 336 | return; 337 | } 338 | 339 | const li = document.createElement("li"); 340 | const capitalizedPriority = 341 | priority.charAt(0).toUpperCase() + priority.slice(1).toLowerCase(); 342 | console.log("Priority:", priority); 343 | console.log("Priority Class:", priorityColors[capitalizedPriority]); 344 | 345 | li.className = `list-group-item card shadow mb-4 bg-transparent ${priorityColors[capitalizedPriority]}`; 346 | 347 | const completeCheckbox = document.createElement("input"); 348 | completeCheckbox.type = "checkbox"; 349 | completeCheckbox.className = "form-check-input task-completed"; 350 | completeCheckbox.addEventListener("change", markAsComplete); 351 | 352 | const deleteButton = document.createElement("button"); 353 | deleteButton.type = "button"; 354 | deleteButton.className = "btn btn-outline-danger float-right delete"; 355 | deleteButton.innerHTML = 356 | ''; 357 | 358 | const editButton = document.createElement("button"); 359 | editButton.className = "btn btn-outline-success btn-sm float-right edit"; 360 | editButton.innerHTML = 361 | ''; 362 | editButton.style.marginRight = "8px"; 363 | editButton.addEventListener("click", handleEditItem); 364 | 365 | const dateTimeParagraph = document.createElement("p"); 366 | dateTimeParagraph.className = "text-muted"; 367 | dateTimeParagraph.id = "created-at"; 368 | dateTimeParagraph.style.fontSize = "15px"; 369 | dateTimeParagraph.style.margin = "0 19px"; 370 | dateTimeParagraph.appendChild( 371 | document.createTextNode("Created:" + new Date().toLocaleString()) 372 | ); 373 | 374 | const dueDateParagraph = document.createElement("p"); 375 | dueDateParagraph.className = "text-muted"; 376 | dueDateParagraph.id = "task-dueDate"; 377 | dueDateParagraph.style.fontSize = "15px"; 378 | dueDateParagraph.style.margin = "0 19px"; 379 | dueDateParagraph.appendChild( 380 | document.createTextNode("Due Date:" + dueDate) 381 | ); 382 | 383 | const priorityParagraph = document.createElement("p"); 384 | priorityParagraph.className = "text-muted"; 385 | priorityParagraph.id = "task-priority"; 386 | priorityParagraph.style.fontSize = "15px"; 387 | priorityParagraph.style.margin = "0 19px"; 388 | priorityParagraph.appendChild(document.createTextNode(capitalizedPriority)); 389 | 390 | li.appendChild(completeCheckbox); 391 | li.appendChild(document.createTextNode(taskTitle)); 392 | li.appendChild(deleteButton); 393 | li.appendChild(editButton); 394 | li.appendChild(dateTimeParagraph); 395 | li.appendChild(dueDateParagraph); 396 | li.appendChild(priorityParagraph); 397 | todoList.appendChild(li); 398 | saveTasksToLocalStorage(); 399 | 400 | displayTaskDetails(li); 401 | } 402 | }); 403 | //adding tasks through voice command ends here 404 | 405 | //logging task details for debugging purpose, does nothing change in UI. 406 | function displayTaskDetails(taskElement) { 407 | if (taskElement) { 408 | const dueDateElement = taskElement.querySelector("#task-dueDate"); 409 | const priorityElement = taskElement.querySelector("#task-priority"); 410 | const dueDate = dueDateElement 411 | ? dueDateElement.textContent.split(":")[1].trim() 412 | : null; 413 | const priority = priorityElement 414 | ? priorityElement.textContent.trim() 415 | : null; 416 | console.log(`Task Details - Due Date: ${dueDate}, Priority: ${priority}`); 417 | } 418 | } 419 | 420 | function showComfirmboxForDuplicateTasks() { 421 | const confirmationBox = document.getElementById("duplicate-task"); 422 | 423 | //display confirmination message 424 | delalert_title = document.getElementById("duplicate-msg"); 425 | delalert_title.innerHTML = "⚠ This task is already present"; 426 | delalert_title.className = "alert alert-danger"; 427 | delalert_title.role = "alert"; 428 | 429 | const confirmYesButton = document.getElementById("duplicate-ok"); 430 | const confirmCancelButton = document.getElementById("duplicate-cancel"); 431 | 432 | //conform message controls click logic 433 | const handleYesClick = () => { 434 | confirmationBox.style.display = "none"; 435 | confirmYesButton.removeEventListener("click", handleYesClick); 436 | confirmCancelButton.removeEventListener("click", handleCancelClick); 437 | }; 438 | 439 | const handleCancelClick = () => { 440 | confirmationBox.style.display = "none"; 441 | confirmYesButton.removeEventListener("click", handleYesClick); 442 | confirmCancelButton.removeEventListener("click", handleCancelClick); 443 | }; 444 | 445 | confirmYesButton.addEventListener("click", handleYesClick); 446 | confirmCancelButton.addEventListener("click", handleCancelClick); 447 | 448 | confirmationBox.style.display = "flex"; 449 | } 450 | 451 | //adding tasks through form manually-logic 452 | function addItem(e) { 453 | e.preventDefault(); 454 | tasksCheck(); 455 | const newTaskTitle = document.getElementById("item").value; 456 | const description = document.getElementById("description").value; 457 | let dueDate = document.getElementById("dueDate").value; 458 | const priority = document.getElementById("priority").value; 459 | 460 | // Check if the due date has already passed 461 | const currentDate = new Date(); 462 | const dueDateObj = new Date(dueDate); 463 | 464 | //check if the tasks are duplicate 465 | if (checkForDuplicateTasks(newTaskTitle)) { 466 | showComfirmboxForDuplicateTasks(); 467 | return false; 468 | } 469 | 470 | let isDescritionPresent = description.trim() === "" ? false : true; 471 | 472 | //form validation code 473 | if (!newTaskTitle) { 474 | displayErrorMessage("Task Title should be filled!!!"); 475 | tasksHeading.classList.add("hidden"); 476 | searchBar.classList.add("hidden"); 477 | return false; 478 | } else if (!dueDate) { 479 | displayErrorMessage("Please specify a due date !!!"); 480 | return false; 481 | } else if (dueDateObj < currentDate) { 482 | displayErrorMessage("Due date has already passed !!!"); 483 | return false; 484 | } else { 485 | tasksHeading.classList.remove("hidden"); 486 | searchBar.classList.remove("hidden"); 487 | } 488 | 489 | if (newTaskTitle.trim() === "") return false; 490 | else { 491 | document.getElementById("item").value = ""; 492 | document.querySelector(".clear_btn").style.display = "inline"; 493 | document.querySelector(".dropdown").style.display = "inline"; 494 | } 495 | const creationDateTime = new Date().toLocaleString(); 496 | createNewTask( 497 | newTaskTitle, 498 | creationDateTime, 499 | dueDate, 500 | priority, 501 | description, 502 | isDescritionPresent 503 | ); 504 | saveTasksToLocalStorage(); 505 | 506 | //clearing form fields after 'add' button 507 | document.getElementById("dueDate").value = ""; 508 | document.getElementById("description").value = ""; 509 | document.getElementById("priority").value = ""; 510 | } 511 | 512 | //check for duplicate tasks 513 | function checkForDuplicateTasks(newTaskTitle) { 514 | var taskList = document.getElementById("taskList"); 515 | var listItems = taskList.querySelectorAll("li"); 516 | var textArray = []; 517 | 518 | listItems.forEach(function (li) { 519 | // Get the text and extract the text content 520 | var textContent = li.textContent.trim(); 521 | // Push the text content into the array 522 | textArray.push(textContent); 523 | }); 524 | TitleArray = textArray.map(function (element) { 525 | // Use regular expression to match and capture the substring before "Description" 526 | var match = element.match(/^(.*?)Description/); 527 | // Check if there is a match and extract the captured group 528 | return match ? match[1] : null; 529 | }); 530 | let isnewTitlepresent = TitleArray.includes(newTaskTitle); 531 | return isnewTitlepresent; 532 | } 533 | 534 | //logic for various item click events 535 | function handleItemClick(e) { 536 | if (e.target.classList.contains("delete")) { 537 | e.preventDefault(); 538 | const li = e.target.parentElement; 539 | const confirmationBox = document.getElementById("custom-confirm"); 540 | 541 | //display confirmination message 542 | delalert_title = document.getElementById("confirm-msg"); 543 | delalert_title.innerHTML = 544 | "⚠ Are you sure you want to delete this task?"; 545 | delalert_title.className = "alert alert-danger"; 546 | delalert_title.role = "alert"; 547 | 548 | const confirmYesButton = document.getElementById("confirm-yes"); 549 | const confirmNoButton = document.getElementById("confirm-no"); 550 | const confirmCancelButton = document.getElementById("confirm-cancel"); 551 | 552 | //conform message controls click logic 553 | const handleYesClick = () => { 554 | confirmationBox.style.display = "none"; 555 | li.parentElement.removeChild(li); 556 | tasksCheck(); 557 | displaySuccessMessage("Task deleted successfully !!!"); 558 | saveTasksToLocalStorage(); 559 | confirmYesButton.removeEventListener("click", handleYesClick); 560 | confirmNoButton.removeEventListener("click", handleNoClick); 561 | confirmCancelButton.removeEventListener("click", handleCancelClick); 562 | }; 563 | 564 | const handleNoClick = () => { 565 | confirmationBox.style.display = "none"; 566 | confirmYesButton.removeEventListener("click", handleYesClick); 567 | confirmNoButton.removeEventListener("click", handleNoClick); 568 | confirmCancelButton.removeEventListener("click", handleCancelClick); 569 | }; 570 | 571 | const handleCancelClick = () => { 572 | confirmationBox.style.display = "none"; 573 | confirmYesButton.removeEventListener("click", handleYesClick); 574 | confirmNoButton.removeEventListener("click", handleNoClick); 575 | confirmCancelButton.removeEventListener("click", handleCancelClick); 576 | }; 577 | 578 | confirmYesButton.addEventListener("click", handleYesClick); 579 | confirmNoButton.addEventListener("click", handleNoClick); 580 | confirmCancelButton.addEventListener("click", handleCancelClick); 581 | 582 | confirmationBox.style.display = "flex"; 583 | } 584 | saveTasksToLocalStorage(); 585 | } 586 | 587 | function markAsComplete(e) { 588 | const li = e.target.parentElement; 589 | const originalClassList = li.dataset.originalClassList; 590 | const editButton = li.querySelector(".edit"); 591 | // Toggle the visibility of the button 592 | if (editButton) 593 | editButton.style.display = 594 | editButton.style.display === "none" ? "block" : "none"; 595 | // If the original class list is stored, toggle it back 596 | if (originalClassList) { 597 | li.className = originalClassList; 598 | li.removeAttribute("data-original-class-list"); 599 | } else { 600 | // If the original class list is not stored, store it and toggle "task-completed" 601 | li.dataset.originalClassList = li.className; 602 | li.classList.toggle("task-completed"); 603 | } 604 | } 605 | 606 | // message box for success 607 | function displaySuccessMessage(message) { 608 | document.getElementById("lblsuccess").innerHTML = message; 609 | document.getElementById("lblsuccess").style.display = "block"; 610 | setTimeout(function () { 611 | document.getElementById("lblsuccess").style.display = "none"; 612 | }, 3000); 613 | } 614 | 615 | // message box for error 616 | function displayErrorMessage(message) { 617 | document.getElementById("lblerror").innerHTML = message; 618 | document.getElementById("lblerror").style.display = "block"; 619 | setTimeout(function () { 620 | document.getElementById("lblerror").style.display = "none"; 621 | }, 3000); 622 | } 623 | 624 | // Function to save tasks to local storage 625 | function saveTasksToLocalStorage() { 626 | const tasks = document.querySelectorAll(".list-group-item"); 627 | const tasksArray = extractTasksData(tasks); 628 | storeTasksInLocalStorage(tasksArray); 629 | } 630 | 631 | // Function to extract task data from DOM elements 632 | // Function to extract tasks data from the DOM 633 | function extractTasksData(tasks) { 634 | return Array.from(tasks).map((task) => { 635 | const taskText = task.childNodes[1].textContent; 636 | const isCompleted = task.classList.contains("completed"); 637 | const createdAt = task.querySelector("#created-at").textContent; 638 | const description = task.querySelector("#description-at") 639 | ? task.querySelector("#description-at").textContent 640 | : ""; 641 | const dueDate = task.querySelector("#task-dueDate").textContent; 642 | const priority = task.querySelector("#task-priority").textContent; 643 | 644 | return createTaskObject( 645 | taskText, 646 | isCompleted, 647 | createdAt, 648 | dueDate, 649 | priority, 650 | description 651 | ); 652 | }); 653 | } 654 | 655 | // Function to create a task object 656 | function createTaskObject( 657 | text, 658 | completed, 659 | createdAt, 660 | dueDate, 661 | priority, 662 | description 663 | ) { 664 | return { 665 | text, 666 | completed, 667 | createdAt, 668 | dueDate, 669 | priority, 670 | description, 671 | }; 672 | } 673 | 674 | // Function to store tasks in local storage 675 | function storeTasksInLocalStorage(tasksArray) { 676 | localStorage.setItem("tasks", JSON.stringify(tasksArray)); 677 | } 678 | 679 | // Function to retrieve tasks from local storage 680 | function getTasksFromLocalStorage() { 681 | return JSON.parse(localStorage.getItem("tasks")) || []; 682 | } 683 | 684 | // Function to display tasks 685 | function loadTasksFromLocalStorage() { 686 | const tasks = getTasksFromLocalStorage(); 687 | const clearButton = document.querySelector(".clear_btn"); 688 | const dropdown = document.querySelector(".dropdown"); 689 | 690 | if (tasks.length > 0) { 691 | tasksHeading.classList.remove("hidden"); 692 | searchBar.classList.remove("hidden"); 693 | clearButton.style.display = "inline"; 694 | dropdown.style.display = "inline"; 695 | 696 | tasks.forEach((task) => { 697 | displayTask(task); 698 | }); 699 | } 700 | } 701 | 702 | // Function to create and display a single task 703 | function displayTask(task) { 704 | createNewTask( 705 | task.text, 706 | task.createdAt.slice(8), 707 | task.dueDate.split(":")[1], 708 | task.priority, 709 | task.description.slice(12) 710 | ); 711 | } 712 | 713 | // Function to enable submit button 714 | function enableSubmit(ref, btnID) { 715 | document.getElementById(btnID).disabled = false; 716 | } 717 | 718 | // Function to toggle between light and dark mode 719 | function toggleMode() { 720 | document.body.classList.toggle("dark-mode"); 721 | document.body.classList.toggle("light-mode"); 722 | if (modeToggleBtn.checked === true) { 723 | localStorage.setItem("dark-mode", "enabled"); 724 | } else { 725 | localStorage.setItem("dark-mode", null); 726 | } 727 | } 728 | 729 | // Function to clear all tasks 730 | function clearAllTasks() { 731 | const taskList = document.getElementById("taskList"); // Replace with your actual task list ID 732 | const confirmationBoxAll = document.getElementById("custom-confirm-all"); 733 | const alertTitle = document.getElementById("confirm-msg-all"); 734 | const confirmYesButtonAll = document.getElementById("confirm-yes-all"); 735 | const confirmNoButtonAll = document.getElementById("confirm-no-all"); 736 | const confirmCancelButtonAll = document.getElementById("confirm-cancel-all"); 737 | 738 | if (taskList.children.length > 0) { 739 | alertTitle.innerHTML = "⚠ Are you sure you want to delete all tasks?"; 740 | alertTitle.className = "alert alert-danger"; 741 | alertTitle.role = "alert"; 742 | 743 | confirmYesButtonAll.addEventListener("click", () => { 744 | confirmationBoxAll.style.display = "none"; 745 | while (taskList.firstChild) { 746 | taskList.removeChild(taskList.firstChild); 747 | } 748 | document.querySelector(".clear_btn").style.display = "none"; 749 | document.querySelector(".dropdown").style.display = "none"; 750 | tasksHeading.classList.add("hidden"); 751 | searchBar.classList.add("hidden"); 752 | localStorage.clear(); 753 | 754 | // saveTasksToLocalStorage(); 755 | }); 756 | 757 | confirmNoButtonAll.addEventListener("click", () => { 758 | confirmationBoxAll.style.display = "none"; 759 | }); 760 | 761 | confirmCancelButtonAll.addEventListener("click", () => { 762 | confirmationBoxAll.style.display = "none"; 763 | }); 764 | 765 | confirmationBoxAll.style.display = "flex"; 766 | } else { 767 | // If there are no tasks, you may choose to show a message or take alternative action 768 | // alert("No tasks to clear"); 769 | } 770 | } 771 | 772 | // Function to sort task list by due date 773 | function sortByDueDate(order) { 774 | const sortTaskList = JSON.parse(localStorage.getItem("tasks")); 775 | 776 | if (order === "early") { 777 | sortTaskList.sort((a, b) => new Date(a.dueDate) - new Date(b.dueDate)); 778 | } else if (order === "late") { 779 | sortTaskList.sort((a, b) => new Date(b.dueDate) - new Date(a.dueDate)); 780 | } 781 | 782 | while (taskList.firstChild) { 783 | taskList.removeChild(taskList.firstChild); 784 | } 785 | 786 | tasksHeading.classList.add("hidden"); 787 | searchBar.classList.add("hidden"); 788 | localStorage.setItem("tasks", JSON.stringify(sortTaskList)); 789 | loadTasksFromLocalStorage(); 790 | } 791 | 792 | // Function to sort task list by priority 793 | function sortByPriority(order) { 794 | const sortTaskList = JSON.parse(localStorage.getItem("tasks")); 795 | 796 | sortTaskList.sort((a, b) => { 797 | if (order === "highToLow") { 798 | return priorityValues[b.priority] - priorityValues[a.priority]; 799 | } else if (order === "lowToHigh") { 800 | return priorityValues[a.priority] - priorityValues[b.priority]; 801 | } else { 802 | return 0; 803 | } 804 | }); 805 | 806 | while (taskList.firstChild) { 807 | taskList.removeChild(taskList.firstChild); 808 | } 809 | 810 | tasksHeading.classList.add("hidden"); 811 | searchBar.classList.add("hidden"); 812 | localStorage.setItem("tasks", JSON.stringify(sortTaskList)); 813 | loadTasksFromLocalStorage(); 814 | } 815 | 816 | // Function to handle dropdown menu 817 | function myFunction() { 818 | document.getElementById("myDropdown").classList.toggle("show"); 819 | } 820 | 821 | // Function to close dropdown menu when clicking outside 822 | window.onclick = function (event) { 823 | if (!event.target.matches(".dropbtn")) { 824 | var dropdowns = document.getElementsByClassName("dropdown-content"); 825 | for (var i = 0; i < dropdowns.length; i++) { 826 | var openDropdown = dropdowns[i]; 827 | if (openDropdown.classList.contains("show")) { 828 | openDropdown.classList.remove("show"); 829 | } 830 | } 831 | } 832 | }; 833 | 834 | // Function to create a new task 835 | function createNewTask( 836 | taskTitle, 837 | createdDate, 838 | dueDate, 839 | priority, 840 | description, 841 | isDescritionPresent 842 | ) { 843 | const li = document.createElement("li"); 844 | li.className = `list-group-item card shadow mb-4 bg-transparent ${priorityColors[priority]}`; 845 | const completeCheckbox = document.createElement("input"); 846 | completeCheckbox.type = "checkbox"; 847 | completeCheckbox.className = "form-check-input task-completed"; 848 | completeCheckbox.addEventListener("change", markAsComplete); 849 | const deleteButton = document.createElement("button"); 850 | deleteButton.type = "button"; 851 | deleteButton.className = "btn btn-outline-danger float-right delete"; 852 | deleteButton.innerHTML = 853 | ''; 854 | deleteButton.style.paddingTop = "10px"; 855 | deleteButton.style.PaddingRight = "10px"; 856 | 857 | const editButton = document.createElement("button"); 858 | editButton.className = "btn btn-outline-secondary btn-sm float-right edit"; 859 | editButton.innerHTML = 860 | ''; 861 | editButton.style.marginRight = "8px"; 862 | editButton.style.paddingTop = "10px"; 863 | editButton.style.PaddingRight = "10px"; 864 | editButton.addEventListener("click", function (e) { 865 | handleEditItem(e); 866 | }); 867 | 868 | const descriptionParagraph = document.createElement("p"); 869 | if (isDescritionPresent === true) { 870 | descriptionParagraph.className = "text-muted"; 871 | descriptionParagraph.id = "description-at"; 872 | descriptionParagraph.style.fontSize = "15px"; 873 | descriptionParagraph.style.margin = "0 19px"; 874 | descriptionParagraph.appendChild( 875 | document.createTextNode("Description: " + description) 876 | ); 877 | } 878 | 879 | const dateTimeParagraph = document.createElement("p"); 880 | dateTimeParagraph.className = "text-muted"; 881 | dateTimeParagraph.id = "created-at"; 882 | dateTimeParagraph.style.fontSize = "15px"; 883 | dateTimeParagraph.style.margin = "0 19px"; 884 | dateTimeParagraph.appendChild( 885 | document.createTextNode("Created: " + createdDate) 886 | ); 887 | 888 | const dueDateParagraph = document.createElement("p"); 889 | dueDateParagraph.className = "text-muted"; 890 | dueDateParagraph.id = "task-dueDate"; 891 | dueDateParagraph.style.fontSize = "15px"; 892 | dueDateParagraph.style.margin = "0 19px"; 893 | dueDateParagraph.appendChild(document.createTextNode("Due Date: " + dueDate)); 894 | 895 | const priorityParagraph = document.createElement("p"); 896 | priorityParagraph.className = "text-muted"; 897 | priorityParagraph.id = "task-priority"; 898 | priorityParagraph.style.fontSize = "15px"; 899 | priorityParagraph.style.margin = "0 19px"; 900 | priorityParagraph.appendChild(document.createTextNode(priority)); 901 | 902 | li.appendChild(completeCheckbox); 903 | li.appendChild(document.createTextNode(taskTitle)); 904 | li.appendChild(deleteButton); 905 | li.appendChild(editButton); 906 | li.appendChild(descriptionParagraph); 907 | li.appendChild(dateTimeParagraph); 908 | li.appendChild(dueDateParagraph); 909 | li.appendChild(priorityParagraph); 910 | 911 | taskList.appendChild(li); 912 | displayTaskDetails(li); 913 | } 914 | 915 | // Function to hide preloader 916 | document.addEventListener("DOMContentLoaded", function () { 917 | setTimeout(function () { 918 | document.querySelector(".preloader").style.display = "none"; 919 | }, 2000); 920 | }); 921 | 922 | // Function to simulate typing effect for header text 923 | document.addEventListener("DOMContentLoaded", function () { 924 | const headerText = "To-Do List Application"; 925 | const headerElement = document.getElementById("todo-header"); 926 | 927 | function typeText(text, index) { 928 | headerElement.textContent = text.slice(0, index); 929 | 930 | if (index < text.length) { 931 | setTimeout(function () { 932 | typeText(text, index + 1); 933 | }, 50); 934 | } 935 | } 936 | 937 | typeText(headerText, 0); 938 | }); 939 | 940 | // Function to handle dark mode preference 941 | function themeSwitcher() { 942 | if (localStorage.length === 0) { 943 | const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)"); 944 | if (prefersDarkScheme.matches) { 945 | document.body.classList.toggle("dark-mode"); 946 | localStorage.setItem("dark-mode", "enabled"); 947 | modeToggleBtn.checked = true; 948 | } else { 949 | document.body.classList.toggle("light-mode"); 950 | localStorage.setItem("dark-mode", null); 951 | } 952 | } else { 953 | if (localStorage.getItem("dark-mode") === "enabled") { 954 | document.body.classList.toggle("dark-mode"); 955 | modeToggleBtn.checked = true; 956 | } else { 957 | document.body.classList.toggle("light-mode"); 958 | } 959 | } 960 | } 961 | themeSwitcher(); 962 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "To-Do-List-Application", 3 | "lockfileVersion": 3, 4 | "requires": true, 5 | "packages": {} 6 | } 7 | -------------------------------------------------------------------------------- /scroll.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function() { 2 | let mybutton = document.getElementById("myBtn"); 3 | 4 | window.addEventListener("scroll", scrollFunction); 5 | 6 | function scrollFunction() { 7 | if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { 8 | mybutton.style.display = "block"; 9 | } else { 10 | mybutton.style.display = "none"; 11 | } 12 | } 13 | 14 | mybutton.addEventListener("click", function() { 15 | // Check for browser support 16 | if ("scrollBehavior" in document.documentElement.style) { 17 | // Smooth scroll to the top 18 | window.scrollTo({ 19 | top: 0, 20 | behavior: "smooth" 21 | }); 22 | } else { 23 | // Fallback for browsers that do not support smooth scrolling 24 | window.scrollTo({ 25 | top: 0, 26 | behavior: "smooth" 27 | }); 28 | } 29 | }); 30 | }); -------------------------------------------------------------------------------- /scroll_img.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap"); */ 2 | @import url("https://fonts.googleapis.com/css2?family=Lora:ital@1&display=swap"); 3 | /* main title */ 4 | @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap"); 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | font-family: "Noto Sans TC", sans-serif; 10 | } 11 | 12 | 13 | 14 | body { 15 | font-weight: 400; 16 | min-height: 100vh; 17 | padding: 0; 18 | box-sizing: border-box; 19 | display: flex; 20 | position: relative; 21 | margin-bottom: -90px; 22 | flex-direction: column; 23 | 24 | background: radial-gradient( 25 | 2224px at 10.6% 8.8%, 26 | rgb(255, 255, 255) 0%, 27 | rgb(153, 202, 251) 100.2% 28 | ); 29 | } 30 | 31 | .dark-mode .content-container{ 32 | min-height: 95vh; 33 | } 34 | 35 | .light-mode .content-container{ 36 | min-height: 95vh; 37 | background: radial-gradient(2224px at 10.6% 8.8%, rgb(255, 255, 255) 0%, rgb(153, 202, 251) 100.2%); 38 | } 39 | .switch { 40 | font-size: 17px; 41 | position: relative; 42 | display: inline-block; 43 | width: 64px; 44 | height: 34px; 45 | } 46 | 47 | .switch input { 48 | opacity: 0; 49 | width: 0; 50 | height: 0; 51 | } 52 | 53 | .slider { 54 | position: absolute; 55 | cursor: pointer; 56 | top: 0; 57 | left: 0; 58 | right: 0; 59 | bottom: 0; 60 | background-color: #73c0fc; 61 | transition: 0.4s; 62 | border-radius: 30px; 63 | } 64 | html { 65 | scroll-behavior: smooth; 66 | } 67 | #myBtn { 68 | scale:1.25; 69 | margin:10px; 70 | display: none; 71 | position: fixed; 72 | bottom: 75px; 73 | left: 25px; 74 | z-index: 99; 75 | border: none; 76 | outline: none; 77 | cursor: pointer; 78 | width: 45px; 79 | padding: 13px; 80 | height: 45px; 81 | border-radius: 50%; 82 | background-color: rgb(255, 255, 255); 83 | box-shadow: #6c6c6c 0px 0px 10px 0px; 84 | } 85 | 86 | #myBtn:hover { 87 | filter: invert(100%); 88 | } 89 | 90 | .dark-mode #myBtn { 91 | scale:1.25; 92 | margin:10px; 93 | display: none; 94 | position: fixed; 95 | bottom: 75px; 96 | left: 25px; 97 | z-index: 99; 98 | border: none; 99 | outline: none; 100 | cursor: pointer; 101 | width: 45px; 102 | padding: 13px; 103 | height: 45px; 104 | filter: invert(0%); 105 | border-radius: 50%; 106 | background-color: rgb(255, 255, 255); 107 | box-shadow: #6c6c6c 0px 0px 10px 0px; 108 | } 109 | 110 | .dark-mode #myBtn:hover { 111 | filter: invert(100%); 112 | } 113 | 114 | .slider:before { 115 | position: absolute; 116 | content: ""; 117 | height: 30px; 118 | width: 30px; 119 | border-radius: 20px; 120 | left: 2px; 121 | bottom: 2px; 122 | z-index: 2; 123 | background-color: #e8e8e8; 124 | transition: 0.4s; 125 | } 126 | 127 | .sun svg { 128 | position: absolute; 129 | top: 6px; 130 | left: 36px; 131 | z-index: 1; 132 | width: 24px; 133 | height: 24px; 134 | } 135 | 136 | .moon svg { 137 | fill: #73c0fc; 138 | position: absolute; 139 | top: 5px; 140 | left: 5px; 141 | z-index: 1; 142 | width: 24px; 143 | height: 24px; 144 | } 145 | 146 | /* .switch:hover */ 147 | .sun svg { 148 | animation: rotate 15s linear infinite; 149 | } 150 | 151 | @keyframes rotate { 152 | 0% { 153 | transform: rotate(0); 154 | } 155 | 156 | 100% { 157 | transform: rotate(360deg); 158 | } 159 | } 160 | 161 | /* .switch:hover */ 162 | .moon svg { 163 | animation: tilt 5s linear infinite; 164 | } 165 | 166 | @keyframes tilt { 167 | 0% { 168 | transform: rotate(0deg); 169 | } 170 | 25% { 171 | transform: rotate(-10deg); 172 | } 173 | 75% { 174 | transform: rotate(10deg); 175 | } 176 | 100% { 177 | transform: rotate(0deg); 178 | } 179 | } 180 | 181 | .input:checked + .slider { 182 | background-color: #183153; 183 | } 184 | 185 | .input:focus + .slider { 186 | box-shadow: 0 0 1px #183153; 187 | } 188 | 189 | .input:checked + .slider:before { 190 | transform: translateX(30px); 191 | } 192 | .container-xl { 193 | position: relative; 194 | width: 100%; 195 | flex: 1; 196 | /* Take remaining vertical space */ 197 | } 198 | 199 | .text { 200 | font-size: 40px; 201 | color: rgb(255, 255, 255); 202 | letter-spacing: 10px; 203 | border-right: 5px solid black; 204 | white-space: nowrap; 205 | animation: typing 5s steps(12) infinite, 206 | cursor 0.4s step-end infinite alternate; 207 | overflow: hidden; 208 | animation-fill-mode: forwards; 209 | } 210 | 211 | @keyframes cursor { 212 | 50% { 213 | border-color: transparent; 214 | } 215 | } 216 | 217 | @keyframes typing { 218 | from { 219 | width: 0; 220 | } 221 | 222 | to { 223 | width: 65%; 224 | } 225 | } 226 | 227 | .text-center { 228 | margin-left: auto; 229 | margin-right: auto; 230 | } 231 | 232 | body.dark-mode { 233 | background: linear-gradient( 234 | 112.1deg, 235 | rgba(0, 60, 255, 0.756) 11.4%, 236 | rgb(63, 76, 119) 70.2% 237 | ); 238 | color: #c0a5ff; 239 | } 240 | 241 | body.dark-mode::before { 242 | content: ""; 243 | position: fixed; 244 | top: 0; 245 | left: 0; 246 | width: 100vw; 247 | height: 100vh; 248 | background-color: rgba(1, 1, 1, 0.9); 249 | z-index: -1; 250 | } 251 | 252 | .main { 253 | position: relative; 254 | width: 48rem; 255 | height: 100%; 256 | text-align: center; 257 | padding: 4rem; 258 | border-radius: 2em; 259 | background-clip: padding-box; 260 | } 261 | 262 | .light-mode .main { 263 | background: rgba(255, 255, 255, 0.447); 264 | box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, 265 | rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset; 266 | backdrop-filter: blur(4px); 267 | -webkit-backdrop-filter: blur(4px); 268 | border-radius: 10px; 269 | border: 1px solid rgba(255, 255, 255, 0.18); 270 | color: #000; 271 | } 272 | 273 | .dropdown-content { 274 | display: none; 275 | position: absolute; 276 | background-color: #f1f1f1; 277 | min-width: 160px; 278 | box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 279 | z-index: 1; 280 | } 281 | 282 | .dark-mode .dropdown-content { 283 | position: absolute; 284 | background-color: rgba(0, 0, 0, 0.9); 285 | min-width: 160px; 286 | box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 287 | z-index: 1; 288 | } 289 | 290 | .show { 291 | display: block; 292 | } 293 | 294 | .dark-mode .main { 295 | background: rgba(83, 83, 83, 0.25); 296 | box-shadow: rgba(145, 56, 255, 0.35) 0px 30px 100px 0px; 297 | border: 2px solid rgba(146, 56, 255, 0.711); 298 | backdrop-filter: blur(4px); 299 | -webkit-backdrop-filter: blur(4px); 300 | border-radius: 10px; 301 | color: #e8e8e8; 302 | } 303 | 304 | .main { 305 | position: relative; 306 | width: 48rem; 307 | height: 100%; 308 | text-align: center; 309 | padding: 4rem; 310 | border-radius: 2em; 311 | backdrop-filter: blur(45px); 312 | background-clip: padding-box; 313 | } 314 | 315 | .list-group-item { 316 | font-size: 1.3rem; 317 | margin: 0.4rem; 318 | text-align: left; 319 | border-radius: 1rem !important; 320 | word-break: break-all; 321 | word-wrap: break-word; 322 | padding: 0.75rem; 323 | width: 80%; 324 | } 325 | 326 | .list-group-item button { 327 | margin: 0 0.2rem; 328 | padding: 0.4rem 1rem; 329 | border-radius: 5rem; 330 | } 331 | 332 | .list-group-item button ion-icon { 333 | pointer-events: none; 334 | } 335 | 336 | .dropdown { 337 | position: relative; 338 | display: inline-block; 339 | } 340 | 341 | .dropdown-content a { 342 | color: black; 343 | padding: 12px 16px; 344 | text-decoration: none; 345 | display: block; 346 | } 347 | 348 | .dropdown-content a:hover { 349 | background-color: #ddd; 350 | cursor: pointer; 351 | } 352 | 353 | .list { 354 | display: flex; 355 | flex-direction: row; 356 | justify-content: space-evenly; 357 | } 358 | 359 | .main h2, 360 | h3 { 361 | font-weight: 600; 362 | } 363 | 364 | @media screen and (max-width: 415px) { 365 | .main_form .form_btn { 366 | font-size: 1rem; 367 | padding: 0.2rem 0.8rem; 368 | } 369 | 370 | .main { 371 | width: 100%; 372 | height: 380px; 373 | padding: 1rem; 374 | } 375 | 376 | .main_form #item { 377 | font-size: 1rem; 378 | } 379 | } 380 | 381 | @media (max-width: 960px) { 382 | .main { 383 | width: 100%; 384 | height: 100%; 385 | padding: 1rem; 386 | } 387 | } 388 | 389 | .message { 390 | width: 300px; 391 | padding: 15px; 392 | border: 2px solid; 393 | border-radius: 5px; 394 | 395 | position: fixed; 396 | z-index: 10; 397 | top: 20px; 398 | right: 20px; 399 | } 400 | 401 | .success-message { 402 | color: #0f5132; 403 | background-color: #d1e7dd; 404 | border-color: #badbcc; 405 | } 406 | 407 | .danger-message { 408 | color: #842029; 409 | background-color: #f8d7da; 410 | border-color: #f5c2c7; 411 | } 412 | 413 | .form-check-input { 414 | position: relative; 415 | margin-left: 10px; 416 | margin-right: 5px; 417 | } 418 | 419 | #dueDate::placeholder { 420 | color: #fff; 421 | } 422 | 423 | #dueDate:hover::placeholder { 424 | color: #fff; 425 | opacity: 1; 426 | } 427 | 428 | .hidden { 429 | display: none; 430 | } 431 | 432 | input[type="checkbox"]:not(.task-completed) { 433 | position: relative; 434 | width: 80px; 435 | height: 40px; 436 | -webkit-appearance: none; 437 | appearance: none; 438 | background: #000; 439 | outline: none; 440 | border-radius: 2rem; 441 | cursor: pointer; 442 | box-shadow: inset 0 0 5px rgba(1, 110, 225); 443 | } 444 | 445 | input[type="checkbox"]:not(.task-completed)::before { 446 | content: ""; 447 | width: 40px; 448 | height: 40px; 449 | border-radius: 50%; 450 | background: #fff; 451 | position: absolute; 452 | top: 0; 453 | left: 0; 454 | transition: 0.5s; 455 | } 456 | 457 | input[type="checkbox"]:not(.task-completed):checked::before { 458 | transform: translateX(100%); 459 | background: #fff; 460 | } 461 | 462 | .custom-confirm, 463 | .custom-confirm-all { 464 | display: none; 465 | position: fixed; 466 | top: 0; 467 | left: 0; 468 | width: 100%; 469 | height: 100%; 470 | background-color: rgba(0, 0, 0, 0.5); 471 | z-index: 1000; 472 | align-items: flex-start; 473 | justify-content: center; 474 | } 475 | 476 | .confirm-content, 477 | .confirm-content-all { 478 | background-color: #fff; 479 | padding: 20px; 480 | top: 20px; 481 | border-radius: 5px; 482 | text-align: center; 483 | position: relative; 484 | } 485 | 486 | .close-button { 487 | position: absolute; 488 | top: 10px; 489 | right: 10px; 490 | cursor: pointer; 491 | font-size: 20px; 492 | color: #333; 493 | } 494 | 495 | h2 { 496 | font-size: 24px; 497 | font-weight: bold; 498 | margin-bottom: 10px; 499 | } 500 | 501 | h4 { 502 | color: #000; 503 | } 504 | 505 | .confirm-content, 506 | .confirm-content-all p { 507 | margin-bottom: 20px; 508 | } 509 | 510 | #confirm-yes, 511 | #confirm-no, 512 | #confirm-yes-all, 513 | #confirm-no-all { 514 | margin: 10px; 515 | padding: 10px 30px; 516 | 517 | cursor: pointer; 518 | border-radius: 5px; 519 | } 520 | 521 | @media screen and (max-width: 768px) { 522 | .mode-toggle { 523 | margin-left: 20px; 524 | } 525 | 526 | .form_btn { 527 | font-size: 1rem; 528 | padding: 0.8rem 2rem; 529 | } 530 | 531 | .form_btn { 532 | font-size: 1rem; 533 | padding: 0.5rem 1rem; 534 | width: auto; 535 | } 536 | } 537 | 538 | @media screen and (max-width: 570px) { 539 | .form_btn { 540 | font-size: 1rem; 541 | padding: 0.8rem 2rem; 542 | } 543 | 544 | .main_form { 545 | flex-direction: column; 546 | border-radius: 2rem; 547 | } 548 | 549 | .main_form input[type="text"] { 550 | width: 100%; 551 | margin: 0.5rem; 552 | } 553 | 554 | .list-group { 555 | margin-top: 1rem; 556 | } 557 | } 558 | 559 | @media screen and (max-width: 424px) { 560 | .main_form input[type="text"] { 561 | width: 100%; 562 | } 563 | 564 | .list-group-item button { 565 | margin: 0; 566 | padding: 0.2rem 0.5rem; 567 | border-radius: 1rem; 568 | } 569 | 570 | .form_btn { 571 | padding: 0.7rem 1rem; 572 | margin: 1rem; 573 | } 574 | 575 | .list-group { 576 | margin-top: 1rem; 577 | } 578 | 579 | #dueDate { 580 | padding: 0.7rem 1rem; 581 | margin: auto; 582 | } 583 | } 584 | 585 | @media screen and (max-width: 390px) { 586 | .list-group-item { 587 | padding: 0.3rem; 588 | } 589 | 590 | .list-group { 591 | margin-top: 1rem; 592 | } 593 | 594 | .main_form .form_btn { 595 | font-size: 0.7rem; 596 | padding: 0.7rem 1rem; 597 | } 598 | 599 | #dueDate { 600 | font-size: smaller; 601 | width: 120px; 602 | height: 35px; 603 | margin: auto; 604 | padding: 0; 605 | } 606 | } 607 | body:not(.dark-mode)::-webkit-scrollbar { 608 | width: 12px; 609 | background-color: #dfe6e9; 610 | } 611 | 612 | body:not(.dark-mode)::-webkit-scrollbar-track { 613 | border: 5px solid white; 614 | background-color: #6c6c6c; 615 | } 616 | 617 | body:not(.dark-mode)::-webkit-scrollbar-thumb { 618 | background-color: #74b9ff; 619 | border-radius: 10px; 620 | } 621 | 622 | body.dark-mode::-webkit-scrollbar { 623 | width: 12px; 624 | background-color: #000000; 625 | } 626 | 627 | body.dark-mode::-webkit-scrollbar-track { 628 | border: 5px solid rgb(0, 0, 0); 629 | background-color: #ffffff; 630 | } 631 | 632 | body.dark-mode::-webkit-scrollbar-thumb { 633 | background-color: rgb(146, 56, 255); 634 | border-radius: 10px; 635 | } 636 | /* Preloader Starts */ 637 | .preloader { 638 | position: fixed; 639 | top: 0; 640 | left: 0; 641 | width: 100%; 642 | height: 100%; 643 | background-color: #fff; 644 | display: flex; 645 | align-items: center; 646 | justify-content: center; 647 | z-index: 9999; 648 | } 649 | 650 | .writing-loader { 651 | display: flex; 652 | justify-content: center; 653 | align-items: center; 654 | font-size: 5rem; 655 | position: absolute; 656 | } 657 | .writing-loader * { 658 | position: absolute; 659 | color: #0081a7; 660 | } 661 | .writing-loader .file-text { 662 | color: #0081a7; 663 | opacity: 0; 664 | animation: fileAppear-1 8s 0s linear infinite; 665 | position: absolute; 666 | } 667 | @keyframes fileAppear-1 { 668 | 10% { 669 | opacity: 0; 670 | } 671 | 25% { 672 | opacity: 1; 673 | } 674 | 30% { 675 | opacity: 1; 676 | } 677 | 33% { 678 | opacity: 0; 679 | } 680 | to { 681 | opacity: 1; 682 | } 683 | } 684 | .writing-loader .pen-container { 685 | display: flex; 686 | justify-content: center; 687 | align-items: center; 688 | top: -50px; 689 | left: -25px; 690 | width: 40px; 691 | height: 40px; 692 | animation: writing 3s linear infinite; 693 | } 694 | @keyframes writing { 695 | from { 696 | transform: translate(0, 0); 697 | } 698 | 5% { 699 | transform: translate(100%, 0); 700 | } 701 | 15% { 702 | transform: translate(0%, 25%); 703 | } 704 | 20% { 705 | transform: translate(100%, 25%); 706 | } 707 | 25% { 708 | transform: translate(0%, 50%); 709 | } 710 | 30% { 711 | transform: translate(100%, 50%); 712 | } 713 | 35% { 714 | transform: translate(0%, 75%); 715 | } 716 | 40% { 717 | transform: translate(100%, 75%); 718 | } 719 | 45% { 720 | transform: translate(0%, 100%); 721 | } 722 | 50% { 723 | transform: translate(100%, 100%); 724 | opacity: 1; 725 | } 726 | 100% { 727 | transform: translate(100%, 100%); 728 | opacity: 0; 729 | } 730 | } 731 | .writing-loader .pen-container .pen { 732 | color: #000000; 733 | font-size: 2.5rem; 734 | } 735 | /* Preloader Ends */ 736 | 737 | /*Task priority indicator*/ 738 | .light-mode .task-priority-High { 739 | border-left: 6px solid rgba(255, 0, 0, 0.474); 740 | } 741 | 742 | .light-mode .task-priority-Medium { 743 | border-left: 6px solid rgba(255, 166, 0, 0.447); 744 | } 745 | 746 | .light-mode .task-priority-Low { 747 | border-left: 6px solid rgba(0, 128, 0, 0.474); 748 | } 749 | 750 | .light-mode .task-completed { 751 | text-decoration: line-through; 752 | border-left: 6px solid rgba(8, 0, 255, 0.474); 753 | } 754 | 755 | .dark-mode .task-priority-High { 756 | border-left: 6px solid rgba(255, 0, 0, 0.737); 757 | } 758 | 759 | .dark-mode .task-priority-Medium { 760 | border-left: 6px solid rgba(255, 166, 0, 0.871); 761 | } 762 | 763 | .dark-mode .task-priority-Low { 764 | border-left: 6px solid rgba(0, 189, 0, 0.795); 765 | } 766 | 767 | .dark-mode .task-completed { 768 | text-decoration: line-through; 769 | border-left: 6px solid rgba(174, 75, 255, 0.914); 770 | } 771 | 772 | /*Task priority indicator end*/ 773 | 774 | option:hover { 775 | background-color: white; 776 | color: white; 777 | } 778 | 779 | select { 780 | width: 150px; 781 | } 782 | 783 | select option { 784 | width: 150px; 785 | } 786 | 787 | .light-mode #voice-command-button { 788 | scale:1.25; 789 | margin:10px; 790 | background-color: #000000; 791 | position: fixed; 792 | bottom: 72px; 793 | right: 20px; 794 | z-index: 1000; 795 | cursor: pointer; 796 | border: none; 797 | outline: none; 798 | transition: 0.6s ease; 799 | box-shadow: #0000008b 0px 0px 6px 0px; 800 | } 801 | 802 | .light-mode #voice-command-button:hover{ 803 | box-shadow: #000000 0px 0px 10px 0px; 804 | } 805 | .dark-mode #voice-command-button i{ 806 | color: rgb(0, 0, 0) ; 807 | } 808 | .light-mode #voice-command-button i{ 809 | color: rgb(159, 221, 255) ; 810 | } 811 | 812 | 813 | .dark-mode #voice-command-button { 814 | scale:1.2; 815 | margin:10px; 816 | background-color: #ffffff; 817 | position: fixed; 818 | bottom: 72px; 819 | right: 22px; 820 | z-index: 1000; 821 | transition: 0.4s ease; 822 | box-shadow: #b1b1b1 0px 0px 8px 0px; 823 | } 824 | .dark-mode #voice-command-button:hover{ 825 | background-color: #e5e5e5; 826 | box-shadow: #b1b1b1 0px 0px 19px 0px; 827 | } 828 | /* new css for form */ 829 | #item, 830 | #priority, 831 | #dueDate { 832 | width: calc(33.33% - 10px); 833 | margin-bottom: 10px; 834 | } 835 | #item { 836 | width: 100%; 837 | padding: 15px; 838 | } 839 | /* css for the priority selection */ 840 | 841 | #dueDate { 842 | cursor: pointer; 843 | } 844 | 845 | #description { 846 | width: 100%; 847 | padding: 15px; 848 | text-overflow: ellipsis; 849 | border-radius: 8px; 850 | height: 80px; 851 | resize: none; 852 | overflow: auto; 853 | -ms-overflow-style: none; 854 | scrollbar-width: none; 855 | } 856 | 857 | #description::-webkit-scrollbar { 858 | display: none; 859 | } 860 | 861 | /* css for the submit button addForm */ 862 | 863 | .dark-mode #submitBtn:disabled { 864 | border-color: #27272790; 865 | background-color: #47474796; 866 | color: #f3f1f1; 867 | } 868 | 869 | @media screen and (max-width: 600px) { 870 | #addForm { 871 | padding: 20px; 872 | } 873 | 874 | #item, 875 | #priority, 876 | #dueDate, 877 | #description { 878 | width: 100%; 879 | } 880 | 881 | #submitBtn, 882 | #editTask { 883 | width: 100%; 884 | } 885 | } 886 | 887 | #addForm input { 888 | border-radius: 30px; 889 | max-height: 60px; 890 | margin-right: 10px; 891 | } 892 | 893 | #priority { 894 | padding: 7px; 895 | max-height: 60px; 896 | margin-right: 10px; 897 | border-radius: 20px; 898 | border-style: none; 899 | border: 2px solid rgba(70, 70, 70, 0.873); 900 | transition: 0.3s ease-in; 901 | } 902 | 903 | .dark-mode #priority { 904 | padding: 7px; 905 | max-height: 60px; 906 | margin-right: 10px; 907 | border-radius: 20px; 908 | border-style: none; 909 | border: 3px solid rgb(146, 56, 255); 910 | transition: 0.3s ease-in; 911 | } 912 | #dueDate { 913 | max-width: 150px; 914 | } 915 | 916 | #item { 917 | max-width: 200px; 918 | } 919 | 920 | ul { 921 | list-style-type: disc; 922 | padding: 0; 923 | display: flex; 924 | justify-content: space-evenly; 925 | align-items: center; 926 | flex-wrap: wrap; 927 | width: 100vw; 928 | } 929 | ul.list-group { 930 | width: auto; 931 | } 932 | 933 | li { 934 | margin: 10px; 935 | } 936 | 937 | .voice-input { 938 | border-radius: 30px; 939 | } 940 | 941 | .titleText { 942 | color: #79c5ff; 943 | } 944 | 945 | .light-mode .footer-down { 946 | flex-direction: column !important; 947 | position: -webkit-sticky; 948 | position: relative; 949 | bottom: 0; 950 | height: 5vh; 951 | 952 | color: rgb(101, 101, 101); 953 | padding-top: 10px; 954 | padding-left: 0px; 955 | max-width: auto; 956 | background: radial-gradient(2224px at 10.6% 8.8%, rgb(255, 255, 255) 0%, rgb(175, 215, 255) 100.2%); 957 | backdrop-filter: blur( 4px ); 958 | -webkit-backdrop-filter: blur( 4px ); 959 | border: 1px solid rgba( 255, 255, 255, 0.18 ); 960 | 961 | } 962 | .dark-mode .footer-down { 963 | position: -webkit-sticky; 964 | position: relative !important; 965 | bottom: 0; 966 | height: 5vh; 967 | color: rgb(255, 255, 255); 968 | padding-top: 10px; 969 | padding-left: 0px; 970 | max-width: auto; 971 | background: rgba(193, 99, 255, 0.25); 972 | backdrop-filter: blur( 4px ); 973 | -webkit-backdrop-filter: blur( 4px ); 974 | border: 1px solid rgba( 255, 255, 255, 0.18 ); 975 | } 976 | 977 | .light-mode .inputcss { 978 | width: 100%; 979 | border-radius: 20px; 980 | height: 40px; 981 | padding: 0 20px; 982 | border-style: none; 983 | background-color: rgba(255, 255, 255, 0.536); 984 | border: 2px solid rgba(70, 70, 70, 0.873); 985 | transition: 0.3s ease-in; 986 | margin-left: 5px; 987 | } 988 | 989 | .dark-mode .inputcss { 990 | width: 100%; 991 | border-radius: 20px; 992 | height: 40px; 993 | padding: 0 20px; 994 | border-style: none; 995 | background-color: rgb(255, 255, 255); 996 | border: 3px solid rgb(146, 56, 255); 997 | transition: 0.3s ease-in; 998 | } 999 | 1000 | .checkbox:checked:before { 1001 | background-color: green; 1002 | } 1003 | 1004 | .dark-mode .btn-outline-dark { 1005 | color: rgb(146, 56, 255); 1006 | border-color: rgb(146, 56, 255); 1007 | } 1008 | .dark-mode .btn-outline-dark:hover { 1009 | color: #fff; 1010 | background-color: rgb(146, 56, 255); 1011 | border-color: rgb(146, 56, 255); 1012 | } 1013 | 1014 | .dark-mode .btn-dark { 1015 | color: #fff; 1016 | background-color: rgb(146, 56, 255); 1017 | border-color: rgb(146, 56, 255); 1018 | } 1019 | 1020 | .dark-mode .btn-dark:hover { 1021 | color: #fff; 1022 | background-color: rgb(123, 52, 210); 1023 | border-color: rgb(123, 52, 210); 1024 | } 1025 | 1026 | .dark-mode .btn-dark:not(:disabled):not(.disabled).active, 1027 | .dark-mode .btn-dark:not(:disabled):not(.disabled):active, 1028 | .dark-mode .show > .dark-mode .btn-dark.dropdown-toggle { 1029 | color: #fff; 1030 | background-color: rgb(123, 52, 210); 1031 | border-color: rgb(123, 52, 210); 1032 | } 1033 | 1034 | .light-mode .custom-confirm, 1035 | .light-mode .custom-confirm-all { 1036 | display: none; 1037 | position: fixed; 1038 | top: 0; 1039 | left: 0; 1040 | width: 100%; 1041 | height: 100%; 1042 | background-color: rgba(0, 0, 0, 0.5); 1043 | z-index: 1000; 1044 | align-items: flex-start; 1045 | justify-content: center; 1046 | } 1047 | 1048 | .dark-mode .confirm-content, 1049 | .dark-mode .confirm-content-all { 1050 | background: rgb(24, 24, 24); 1051 | padding: 20px; 1052 | top: 20px; 1053 | border-radius: 5px; 1054 | text-align: center; 1055 | position: relative; 1056 | } 1057 | 1058 | .light-mode #myDropdown .a1 { 1059 | background: #00bfffd5; 1060 | } 1061 | .light-mode #myDropdown .a2 { 1062 | background: #0091dfd8; 1063 | } 1064 | .light-mode #myDropdown .a3 { 1065 | background: #006dcdcc; 1066 | } 1067 | .light-mode #myDropdown .a4 { 1068 | background: #0075cea5; 1069 | } 1070 | 1071 | .dark-mode #myDropdown .a1 { 1072 | background: #8000ffd5; 1073 | } 1074 | .dark-mode #myDropdown .a2 { 1075 | background: #8d00dfd8; 1076 | } 1077 | .dark-mode #myDropdown .a3 { 1078 | background: #8c00cdcc; 1079 | } 1080 | .dark-mode #myDropdown .a4 { 1081 | background: #8d00cea5; 1082 | } 1083 | 1084 | .light-mode #myDropdown { 1085 | color: rgba(1, 63, 97, 0.967); 1086 | } 1087 | 1088 | .dark-mode #myDropdown { 1089 | color: rgba(47, 0, 65, 0.967); 1090 | } 1091 | 1092 | #myDropdown a:hover{ 1093 | color:white; 1094 | } 1095 | 1096 | .github-icon{ 1097 | position: absolute; 1098 | cursor: pointer; 1099 | top: 25px; 1100 | right: 35px; 1101 | bottom: 0px; 1102 | transition: all 0.4s ease 0s; 1103 | } 1104 | 1105 | .light-mode .github-icon a i{ 1106 | font-size: 50px; 1107 | color:black !important; 1108 | } 1109 | 1110 | .dark-mode .github-icon a i{ 1111 | font-size: 50px; 1112 | color:rgb(227, 227, 227) !important; 1113 | } 1114 | --------------------------------------------------------------------------------

Confirmation

Are you sure you want to delete this task?

Alert

This task is already present

Confirmation

Are you sure you want to delete this task?

Add your tasks below :

Tasks

203 | Why Simply Tasked?