{"id":20609,"date":"2022-11-10T13:16:07","date_gmt":"2022-11-10T07:46:07","guid":{"rendered":"https:\/\/copyassignment.com\/?p=20609"},"modified":"2022-12-06T13:48:08","modified_gmt":"2022-12-06T08:18:08","slug":"to-do-list-in-html-css-javascript","status":"publish","type":"post","link":"https:\/\/copyassignment.com\/to-do-list-in-html-css-javascript\/","title":{"rendered":"To-Do List in HTML CSS JavaScript"},"content":{"rendered":"\n<p>We will be creating a simple To-Do list in HTML CSS JavaScript. Features of To-Do list app are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add new tasks<\/li>\n\n\n\n<li>Mark tasks as completed<\/li>\n\n\n\n<li>Show pending tasks<\/li>\n\n\n\n<li>Show completed tasks<\/li>\n\n\n\n<li>Clear all tasks<\/li>\n<\/ul>\n\n\n\n<p>We will be using HTML, CSS and JavaScript for developing To-Do List in HTML CSS JavaScript. Checkout this image for folder structure of our project.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" data-src=\"https:\/\/copyassignment.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-10-124202.jpg\" alt=\"folder structure for To-Do List in HTML CSS JavaScript\" class=\"wp-image-20626 lazyload\" width=\"315\" height=\"183\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 315px; --smush-placeholder-aspect-ratio: 315\/183;\" \/><\/figure>\n\n\n\n<p><strong>index.html contains our Html code.<\/strong><\/p>\n\n\n\n<p><strong>style.css contains styling for our web page.<\/strong><\/p>\n\n\n\n<p><strong>main.js contains all the logic.<\/strong><\/p>\n\n\n\n<p>If you want a single file(HTML+CSS+JavaScript), <a href=\"#complete-code\">click here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>HTML code:<\/strong><\/h2>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-9886351916045880\" data-ad-slot=\"2002566052\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><div style=\"position:absolute;top:-20px;right:0px;cursor:pointer\" class=\"copy-simple-code-block\"><span class=\"dashicon dashicons dashicons-admin-page\"><\/span><\/div><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"html\" data-theme=\"xcode\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"true\">&lt;html lang=\"en\">\n  &lt;head>\n    &lt;meta charset=\"UTF-8\" \/>\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    &lt;link rel='stylesheet' type='text\/css' ' media=\"screen\" href=\"style.css\"\/>\n    &lt;title>Todo List App&lt;\/title>\n  &lt;\/head>\n\n  &lt;body>\n    &lt;div class=\"wrapper\">\n      &lt;div class=\"task-input\">\n        &lt;ion-icon name=\"create-outline\">&lt;\/ion-icon>\n        &lt;input type=\"text\" placeholder=\"Add a New Task + Enter\" \/>\n      &lt;\/div>\n      &lt;div class=\"controls\">\n        &lt;div class=\"filters\">\n          &lt;span class=\"active\" id=\"all\">All&lt;\/span>\n          &lt;span id=\"pending\">Pending&lt;\/span>\n          &lt;span id=\"completed\">Completed&lt;\/span>\n        &lt;\/div>\n        &lt;button class=\"clear-btn\">Clear All&lt;\/button>\n      &lt;\/div>\n      &lt;ul class=\"task-box\">&lt;\/ul>\n    &lt;\/div>\n    &lt;script src=\"main.js\">&lt;\/script>\n  &lt;\/body>\n&lt;\/html><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>JavaScript code:<\/strong><\/h2>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><div style=\"position:absolute;top:-20px;right:0px;cursor:pointer\" class=\"copy-simple-code-block\"><span class=\"dashicon dashicons dashicons-admin-page\"><\/span><\/div><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"javascript\" data-theme=\"xcode\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"true\">const taskInput = document.querySelector(\".task-input input\"),\n    filters = document.querySelectorAll(\".filters span\"),\n    clearAll = document.querySelector(\".clear-btn\"),\n    taskBox = document.querySelector(\".task-box\");\n\nlet editId,\n    isEditTask = false,\n    todos = JSON.parse(localStorage.getItem(\"todo-list\"));\n\nfilters.forEach((btn) => {\n    btn.addEventListener(\"click\", () => {\n        document.querySelector(\"span.active\").classList.remove(\"active\");\n        btn.classList.add(\"active\");\n        showTodo(btn.id);\n    });\n});\n\nshowTodo(\"all\");\n\nfunction showTodo(filter) {\n    let liTag = \"\";\n    if (todos) {\n        todos.forEach((todo, id) => {\n            let completed = todo.status == \"completed\" ? \"checked\" : \"\";\n            if (filter == todo.status || filter == \"all\") {\n                liTag += `&lt;li class=\"task\">\n                            &lt;label for=\"${id}\">\n                                &lt;input onclick=\"updateStatus(this)\" type=\"checkbox\" id=\"${id}\" ${completed}>\n                                &lt;p class=\"${completed}\">${todo.name}&lt;\/p>\n                            &lt;\/label>\n                            &lt;div class=\"settings\">\n                                &lt;i onclick=\"showMenu(this)\" class=\"uil uil-ellipsis-h\">&lt;\/i>\n                                &lt;ul class=\"task-menu\">\n                                    &lt;li onclick='editTask(${id}, \"${todo.name}\")'>&lt;i class=\"uil uil-pen\">&lt;\/i>Edit&lt;\/li>\n                                    &lt;li onclick='deleteTask(${id}, \"${filter}\")'>&lt;i class=\"uil uil-trash\">&lt;\/i>Delete&lt;\/li>\n                                &lt;\/ul>\n                            &lt;\/div>\n                        &lt;\/li>`;\n            }\n        });\n    }\n    taskBox.innerHTML =\n        liTag || `&lt;span>You don't have any task here&lt;\/span>`;\n    let checkTask = taskBox.querySelectorAll(\".task\");\n    !checkTask.length\n        ? clearAll.classList.remove(\"active\")\n        : clearAll.classList.add(\"active\");\n    taskBox.offsetHeight >= 300\n        ? taskBox.classList.add(\"overflow\")\n        : taskBox.classList.remove(\"overflow\");\n}\n\nfunction showMenu(selectedTask) {\n    let menuDiv = selectedTask.parentElement.lastElementChild;\n    menuDiv.classList.add(\"show\");\n    document.addEventListener(\"click\", (e) => {\n        if (e.target.tagName != \"I\" || e.target != selectedTask) {\n            menuDiv.classList.remove(\"show\");\n        }\n    });\n}\n\nfunction updateStatus(selectedTask) {\n    let taskName = selectedTask.parentElement.lastElementChild;\n    if (selectedTask.checked) {\n        taskName.classList.add(\"checked\");\n        todos[selectedTask.id].status = \"completed\";\n    } else {\n        taskName.classList.remove(\"checked\");\n        todos[selectedTask.id].status = \"pending\";\n    }\n    localStorage.setItem(\"todo-list\", JSON.stringify(todos));\n}\n\nfunction editTask(taskId, textName) {\n    editId = taskId;\n    isEditTask = true;\n    taskInput.value = textName;\n    taskInput.focus();\n    taskInput.classList.add(\"active\");\n}\n\nfunction deleteTask(deleteId, filter) {\n    isEditTask = false;\n    todos.splice(deleteId, 1);\n    localStorage.setItem(\"todo-list\", JSON.stringify(todos));\n    showTodo(filter);\n}\n\nclearAll.addEventListener(\"click\", () => {\n    isEditTask = false;\n    todos.splice(0, todos.length);\n    localStorage.setItem(\"todo-list\", JSON.stringify(todos));\n    showTodo();\n});\n\ntaskInput.addEventListener(\"keyup\", (e) => {\n    let userTask = taskInput.value.trim();\n    if (e.key == \"Enter\" &amp;&amp; userTask) {\n        if (!isEditTask) {\n            todos = !todos ? [] : todos;\n            let taskInfo = { name: userTask, status: \"pending\" };\n            todos.push(taskInfo);\n        } else {\n            isEditTask = false;\n            todos[editId].name = userTask;\n        }\n        taskInput.value = \"\";\n        localStorage.setItem(\"todo-list\", JSON.stringify(todos));\n        showTodo(document.querySelector(\"span.active\").id);\n    }\n});<\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>CSS code:<\/strong><\/h2>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><div style=\"position:absolute;top:-20px;right:0px;cursor:pointer\" class=\"copy-simple-code-block\"><span class=\"dashicon dashicons dashicons-admin-page\"><\/span><\/div><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"css\" data-theme=\"xcode\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"true\">* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: \"Poppins\", sans-serif;\n}\n\nbody {\n  width: 100%;\n  height: 100vh;\n  overflow: hidden;\n  background: linear-gradient(135deg, #ff00d4, #00ddff);\n}\n\n::selection {\n  color: #fff;\n  background: #ff00d4;\n}\n\n.wrapper {\n  max-width: 405px;\n  background: #fff;\n  margin: 137px auto;\n  border-radius: 7px;\n  padding: 28px 0 30px;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n}\n\n.task-input {\n  position: relative;\n  height: 52px;\n  padding: 0 25px;\n}\n\n.task-input ion-icon {\n  position: absolute;\n  top: 50%;\n  color: #999;\n  font-size: 25px;\n  transform: translate(17px, -50%);\n}\n\n.task-input input {\n  height: 100%;\n  width: 100%;\n  outline: none;\n  font-size: 18px;\n  border-radius: 5px;\n  padding: 0 20px 0 53px;\n  border: 1px solid #999;\n}\n\n.task-input input:focus,\n.task-input input.active {\n  padding-left: 52px;\n  border: 2px solid #f12711;\n}\n\n.task-input input::placeholder {\n  color: #bfbfbf;\n}\n\n.controls,\nli {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.controls {\n  padding: 18px 25px;\n  border-bottom: 1px solid #ccc;\n}\n\n.filters span {\n  margin: 0 8px;\n  font-size: 17px;\n  color: #444444;\n  cursor: pointer;\n}\n\n.filters span:first-child {\n  margin-left: 0;\n}\n\n.filters span.active {\n  color: #f12711;\n}\n\n.clear-btn {\n  border: none;\n  opacity: 0.6;\n  outline: none;\n  color: #fff;\n  cursor: pointer;\n  font-size: 13px;\n  padding: 7px 13px;\n  border-radius: 4px;\n  letter-spacing: 0.3px;\n  pointer-events: none;\n  transition: transform 0.25s ease;\n  background: linear-gradient(135deg, #ff00d4 0%, #00ddff 100%);\n}\n\n.clear-btn.active {\n  opacity: 0.9;\n  pointer-events: auto;\n}\n\n.clear-btn:active {\n  transform: scale(0.93);\n}\n\n.task-box {\n  margin-top: 20px;\n  margin-right: 5px;\n  padding: 0 20px 10px 25px;\n}\n\n.task-box.overflow {\n  overflow-y: auto;\n  max-height: 300px;\n}\n\n.task-box::-webkit-scrollbar {\n  width: 5px;\n}\n\n.task-box::-webkit-scrollbar-track {\n  background: #f12711;\n  border-radius: 25px;\n}\n\n.task-box::-webkit-scrollbar-thumb {\n  background: #e6e6e6;\n  border-radius: 25px;\n}\n\n.task-box .task {\n  list-style: none;\n  font-size: 17px;\n  margin-bottom: 18px;\n  padding-bottom: 16px;\n  align-items: flex-start;\n  border-bottom: 1px solid #ccc;\n}\n\n.task-box .task:last-child {\n  margin-bottom: 0;\n  border-bottom: 0;\n  padding-bottom: 0;\n}\n\n.task-box .task label {\n  display: flex;\n  align-items: flex-start;\n}\n\n.task label input {\n  margin-top: 7px;\n  accent-color: #ff00d4;\n}\n\n.task label p {\n  user-select: none;\n  margin-left: 12px;\n  word-wrap: break-word;\n}\n\n.task label p.checked {\n  text-decoration: line-through;\n}\n\n.task-box .settings {\n  position: relative;\n}\n\n.settings :where(i, li) {\n  cursor: pointer;\n}\n\n.settings .task-menu {\n  position: absolute;\n  right: -5px;\n  bottom: -65px;\n  padding: 5px 0;\n  background: #fff;\n  border-radius: 4px;\n  transform: scale(0);\n  transform-origin: top right;\n  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);\n  transition: transform 0.2s ease;\n  z-index: 10;\n}\n\n.task-box .task:last-child .task-menu {\n  bottom: 0;\n  transform-origin: bottom right;\n}\n\n.task-box .task:first-child .task-menu {\n  bottom: -65px;\n  transform-origin: top right;\n}\n\n.task-menu.show {\n  transform: scale(1);\n}\n\n.task-menu li {\n  height: 25px;\n  font-size: 16px;\n  margin-bottom: 2px;\n  padding: 17px 15px;\n  cursor: pointer;\n  justify-content: flex-start;\n}\n\n.task-menu li:last-child {\n  margin-bottom: 0;\n}\n\n.settings li:hover {\n  background: #000;\n}\n\n.settings li i {\n  padding-right: 8px;\n}\n\n@media (max-width: 400px) {\n  body {\n    padding: 0 10px;\n  }\n  .wrapper {\n    padding: 20px 0;\n  }\n  .filters span {\n    margin: 0 5px;\n  }\n  .task-input {\n    padding: 0 20px;\n  }\n  .controls {\n    padding: 18px 20px;\n  }\n  .task-box {\n    margin-top: 20px;\n    margin-right: 5px;\n    padding: 0 15px 10px 20px;\n  }\n  .task label input {\n    margin-top: 4px;\n  }\n}<\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"complete-code\">Complete code for To-Do List in HTML CSS JavaScript<\/h2>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-9886351916045880\" data-ad-slot=\"2002566052\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><div style=\"position:absolute;top:-20px;right:0px;cursor:pointer\" class=\"copy-simple-code-block\"><span class=\"dashicon dashicons dashicons-admin-page\"><\/span><\/div><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"html\" data-theme=\"xcode\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"true\">&lt;html lang=\"en\">\n\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  &lt;title>Todo List App&lt;\/title>\n&lt;\/head>\n\n&lt;body>\n  &lt;div class=\"wrapper\">\n    &lt;div class=\"task-input\">\n      &lt;ion-icon name=\"create-outline\">&lt;\/ion-icon>\n      &lt;input type=\"text\" placeholder=\"Add a New Task + Enter\">\n    &lt;\/div>\n    &lt;div class=\"controls\">\n      &lt;div class=\"filters\">\n        &lt;span class=\"active\" id=\"all\">All&lt;\/span>\n        &lt;span id=\"pending\">Pending&lt;\/span>\n        &lt;span id=\"completed\">Completed&lt;\/span>\n      &lt;\/div>\n      &lt;button class=\"clear-btn\">Clear All&lt;\/button>\n    &lt;\/div>\n    &lt;ul class=\"task-box\">&lt;\/ul>\n  &lt;\/div>\n  &lt;style>\n  * {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: \"Poppins\", sans-serif;\n}\n\nbody {\n  width: 100%;\n  height: 100vh;\n  overflow: hidden;\n  background: linear-gradient(135deg, #ff00d4, #00ddff);\n}\n\n::selection {\n  color: #fff;\n  background: #ff00d4;\n}\n\n.wrapper {\n  max-width: 405px;\n  background: #fff;\n  margin: 137px auto;\n  border-radius: 7px;\n  padding: 28px 0 30px;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n}\n\n.task-input {\n  position: relative;\n  height: 52px;\n  padding: 0 25px;\n}\n\n.task-input ion-icon {\n  position: absolute;\n  top: 50%;\n  color: #999;\n  font-size: 25px;\n  transform: translate(17px, -50%);\n}\n\n.task-input input {\n  height: 100%;\n  width: 100%;\n  outline: none;\n  font-size: 18px;\n  border-radius: 5px;\n  padding: 0 20px 0 53px;\n  border: 1px solid #999;\n}\n\n.task-input input:focus,\n.task-input input.active {\n  padding-left: 52px;\n  border: 2px solid #f12711;\n}\n\n.task-input input::placeholder {\n  color: #bfbfbf;\n}\n\n.controls,\nli {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.controls {\n  padding: 18px 25px;\n  border-bottom: 1px solid #ccc;\n}\n\n.filters span {\n  margin: 0 8px;\n  font-size: 17px;\n  color: #444444;\n  cursor: pointer;\n}\n\n.filters span:first-child {\n  margin-left: 0;\n}\n\n.filters span.active {\n  color: #f12711;\n}\n\n.clear-btn {\n  border: none;\n  opacity: 0.6;\n  outline: none;\n  color: #fff;\n  cursor: pointer;\n  font-size: 13px;\n  padding: 7px 13px;\n  border-radius: 4px;\n  letter-spacing: 0.3px;\n  pointer-events: none;\n  transition: transform 0.25s ease;\n  background: linear-gradient(135deg, #ff00d4 0%, #00ddff 100%);\n}\n\n.clear-btn.active {\n  opacity: 0.9;\n  pointer-events: auto;\n}\n\n.clear-btn:active {\n  transform: scale(0.93);\n}\n\n.task-box {\n  margin-top: 20px;\n  margin-right: 5px;\n  padding: 0 20px 10px 25px;\n}\n\n.task-box.overflow {\n  overflow-y: auto;\n  max-height: 300px;\n}\n\n.task-box::-webkit-scrollbar {\n  width: 5px;\n}\n\n.task-box::-webkit-scrollbar-track {\n  background: #f12711;\n  border-radius: 25px;\n}\n\n.task-box::-webkit-scrollbar-thumb {\n  background: #e6e6e6;\n  border-radius: 25px;\n}\n\n.task-box .task {\n  list-style: none;\n  font-size: 17px;\n  margin-bottom: 18px;\n  padding-bottom: 16px;\n  align-items: flex-start;\n  border-bottom: 1px solid #ccc;\n}\n\n.task-box .task:last-child {\n  margin-bottom: 0;\n  border-bottom: 0;\n  padding-bottom: 0;\n}\n\n.task-box .task label {\n  display: flex;\n  align-items: flex-start;\n}\n\n.task label input {\n  margin-top: 7px;\n  accent-color: #ff00d4;\n}\n\n.task label p {\n  user-select: none;\n  margin-left: 12px;\n  word-wrap: break-word;\n}\n\n.task label p.checked {\n  text-decoration: line-through;\n}\n\n.task-box .settings {\n  position: relative;\n}\n\n.settings :where(i, li) {\n  cursor: pointer;\n}\n\n.settings .task-menu {\n  position: absolute;\n  right: -5px;\n  bottom: -65px;\n  padding: 5px 0;\n  background: #fff;\n  border-radius: 4px;\n  transform: scale(0);\n  transform-origin: top right;\n  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);\n  transition: transform 0.2s ease;\n  z-index: 10;\n}\n\n.task-box .task:last-child .task-menu {\n  bottom: 0;\n  transform-origin: bottom right;\n}\n\n.task-box .task:first-child .task-menu {\n  bottom: -65px;\n  transform-origin: top right;\n}\n\n.task-menu.show {\n  transform: scale(1);\n}\n\n.task-menu li {\n  height: 25px;\n  font-size: 16px;\n  margin-bottom: 2px;\n  padding: 17px 15px;\n  cursor: pointer;\n  justify-content: flex-start;\n}\n\n.task-menu li:last-child {\n  margin-bottom: 0;\n}\n\n.settings li:hover {\n  background: #000;\n}\n\n.settings li i {\n  padding-right: 8px;\n}\n\n@media (max-width: 400px) {\n  body {\n    padding: 0 10px;\n  }\n  .wrapper {\n    padding: 20px 0;\n  }\n  .filters span {\n    margin: 0 5px;\n  }\n  .task-input {\n    padding: 0 20px;\n  }\n  .controls {\n    padding: 18px 20px;\n  }\n  .task-box {\n    margin-top: 20px;\n    margin-right: 5px;\n    padding: 0 15px 10px 20px;\n  }\n  .task label input {\n    margin-top: 4px;\n  }\n}\n\n  &lt;\/style>\n  &lt;script>\n  const taskInput = document.querySelector(\".task-input input\"),\n  filters = document.querySelectorAll(\".filters span\"),\n  clearAll = document.querySelector(\".clear-btn\"),\n  taskBox = document.querySelector(\".task-box\");\n\nlet editId,\n  isEditTask = false,\n  todos = JSON.parse(localStorage.getItem(\"todo-list\"));\n\nfilters.forEach((btn) => {\n  btn.addEventListener(\"click\", () => {\n    document.querySelector(\"span.active\").classList.remove(\"active\");\n    btn.classList.add(\"active\");\n    showTodo(btn.id);\n  });\n});\n\nshowTodo(\"all\");\n\nfunction showTodo(filter) {\n  let liTag = \"\";\n  if (todos) {\n    todos.forEach((todo, id) => {\n      let completed = todo.status == \"completed\" ? \"checked\" : \"\";\n      if (filter == todo.status || filter == \"all\") {\n        liTag += `&lt;li class=\"task\">\n                            &lt;label for=\"${id}\">\n                                &lt;input onclick=\"updateStatus(this)\" type=\"checkbox\" id=\"${id}\" ${completed}>\n                                &lt;p class=\"${completed}\">${todo.name}&lt;\/p>\n                            &lt;\/label>\n                            &lt;div class=\"settings\">\n                                &lt;i onclick=\"showMenu(this)\" class=\"uil uil-ellipsis-h\">&lt;\/i>\n                                &lt;ul class=\"task-menu\">\n                                    &lt;li onclick='editTask(${id}, \"${todo.name}\")'>&lt;i class=\"uil uil-pen\">&lt;\/i>Edit&lt;\/li>\n                                    &lt;li onclick='deleteTask(${id}, \"${filter}\")'>&lt;i class=\"uil uil-trash\">&lt;\/i>Delete&lt;\/li>\n                                &lt;\/ul>\n                            &lt;\/div>\n                        &lt;\/li>`;\n      }\n    });\n  }\n  taskBox.innerHTML = liTag || `&lt;span>You don't have any task here&lt;\/span>`;\n  let checkTask = taskBox.querySelectorAll(\".task\");\n  !checkTask.length\n    ? clearAll.classList.remove(\"active\")\n    : clearAll.classList.add(\"active\");\n  taskBox.offsetHeight >= 300\n    ? taskBox.classList.add(\"overflow\")\n    : taskBox.classList.remove(\"overflow\");\n}\n\nfunction showMenu(selectedTask) {\n  let menuDiv = selectedTask.parentElement.lastElementChild;\n  menuDiv.classList.add(\"show\");\n  document.addEventListener(\"click\", (e) => {\n    if (e.target.tagName != \"I\" || e.target != selectedTask) {\n      menuDiv.classList.remove(\"show\");\n    }\n  });\n}\n\nfunction updateStatus(selectedTask) {\n  let taskName = selectedTask.parentElement.lastElementChild;\n  if (selectedTask.checked) {\n    taskName.classList.add(\"checked\");\n    todos[selectedTask.id].status = \"completed\";\n  } else {\n    taskName.classList.remove(\"checked\");\n    todos[selectedTask.id].status = \"pending\";\n  }\n  localStorage.setItem(\"todo-list\", JSON.stringify(todos));\n}\n\nfunction editTask(taskId, textName) {\n  editId = taskId;\n  isEditTask = true;\n  taskInput.value = textName;\n  taskInput.focus();\n  taskInput.classList.add(\"active\");\n}\n\nfunction deleteTask(deleteId, filter) {\n  isEditTask = false;\n  todos.splice(deleteId, 1);\n  localStorage.setItem(\"todo-list\", JSON.stringify(todos));\n  showTodo(filter);\n}\n\nclearAll.addEventListener(\"click\", () => {\n  isEditTask = false;\n  todos.splice(0, todos.length);\n  localStorage.setItem(\"todo-list\", JSON.stringify(todos));\n  showTodo();\n});\n\ntaskInput.addEventListener(\"keyup\", (e) => {\n  let userTask = taskInput.value.trim();\n  if (e.key == \"Enter\" &amp;&amp; userTask) {\n    if (!isEditTask) {\n      todos = !todos ? [] : todos;\n      let taskInfo = { name: userTask, status: \"pending\" };\n      todos.push(taskInfo);\n    } else {\n      isEditTask = false;\n      todos[editId].name = userTask;\n    }\n    taskInput.value = \"\";\n    localStorage.setItem(\"todo-list\", JSON.stringify(todos));\n    showTodo(document.querySelector(\"span.active\").id);\n  }\n});\n\n  &lt;\/script>\n&lt;\/body>\n\n&lt;\/html><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Output for To-Do List in HTML CSS JavaScript:<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" data-src=\"https:\/\/copyassignment.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-10-125913.jpg\" alt=\"Output 1 for To-Do List in HTML CSS JavaScript\" class=\"wp-image-20629 lazyload\" width=\"256\" height=\"194\" data-srcset=\"https:\/\/copyassignment.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-10-125913.jpg 645w, https:\/\/copyassignment.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-10-125913-300x228.jpg 300w\" data-sizes=\"(max-width: 256px) 100vw, 256px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 256px; --smush-placeholder-aspect-ratio: 256\/194;\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" data-src=\"https:\/\/copyassignment.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-10-130010.jpg\" alt=\"Output 2 for To-Do List in HTML CSS JavaScript\" class=\"wp-image-20628 lazyload\" width=\"258\" height=\"212\" data-srcset=\"https:\/\/copyassignment.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-10-130010.jpg 623w, https:\/\/copyassignment.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-10-130010-300x247.jpg 300w\" data-sizes=\"(max-width: 258px) 100vw, 258px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 258px; --smush-placeholder-aspect-ratio: 258\/212;\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" data-src=\"https:\/\/copyassignment.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-10-130037.jpg\" alt=\"Output 3 for To-Do List in HTML CSS JavaScript\" class=\"wp-image-20627 lazyload\" width=\"254\" height=\"209\" data-srcset=\"https:\/\/copyassignment.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-10-130037.jpg 598w, https:\/\/copyassignment.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-10-130037-300x246.jpg 300w\" data-sizes=\"(max-width: 254px) 100vw, 254px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 254px; --smush-placeholder-aspect-ratio: 254\/209;\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-9886351916045880\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-format=\"autorelaxed\"\n     data-ad-client=\"ca-pub-9886351916045880\"\n     data-ad-slot=\"7933252109\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<div style=\"text-align:center\" class=\"wp-block-atomic-blocks-ab-button ab-block-button\"><a href=\"https:\/\/copyassignment.com\/?s=javascript\" class=\"ab-button ab-button-shape-rounded ab-button-size-medium\" style=\"color:#ffffff;background-color:#3373dc\">JavaScript and web Projects<\/a><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Also Read:<\/strong><\/p>\n\n\n<ul class=\"wp-block-latest-posts__list is-grid columns-3 wp-block-latest-posts\"><li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/download-1000-projects-all-b-tech-programming-notes-job-resume-interview-guide-and-more-get-your-ultimate-programming-bundle\/\">Download 1000+ Projects, All B.Tech &#038; Programming Notes, Job, Resume &#038; Interview Guide, and More &#8211; Get Your Ultimate Programming Bundle!<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/what-is-web-development-for-beginners\/\">What is web development for beginners?<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/music-recommendation-system-in-machine-learning\/\">Music Recommendation System in Machine Learning<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/blood-bank-management-system-project-in-php\/\">Blood Bank Management System Project In PHP<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/100-java-projects-for-beginners-2023\/\">100+ Java Projects for Beginners 2023<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/chat-app-with-nodejs-and-socket-io\/\">Chat App with Node.js and Socket.io<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/draw-doraemon-using-html-and-css\/\">Draw Doraemon using HTML and CSS<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/draw-house-using-html-and-css\/\">Draw House using HTML and CSS<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/draw-dog-using-css\/\">Draw Dog using CSS<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/rock-paper-scissor-in-html-css-javascript\/\">Rock Paper Scissor in HTML CSS JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/pong-game-in-html-and-javascript\/\">Pong Game in HTML and JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/tip-calculator-in-html-and-javascript\/\">Tip Calculator in HTML and JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/calculator-in-html-css-javascript\/\">Calculator in HTML CSS JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/bmi-calculator-in-html-css-javascript\/\">BMI Calculator in HTML CSS JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/color-picker-in-html-and-javascript\/\">Color picker in HTML and JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/number-guessing-game-in-javascript\/\">Number Guessing Game in JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/atm-in-javascript\/\">ATM in JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/inventory-management-system-in-javascript\/\">Inventory Management System in JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/courier-tracking-system-in-html-css-and-js\/\">Courier Tracking System in HTML CSS and JS<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/word-count-app-in-javascript\/\">Word Count App in JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/test-typing-speed-using-python-app\/\">Test Typing Speed using Python App<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/top-10-php-projects-with-source-code\/\">Top 10 PHP Projects with Source Code<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/to-do-list-in-html-css-javascript\/\">To-Do List in HTML CSS JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/tic-tac-toe-game-in-javascript\/\">Tic-Tac-Toe game in JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/music-player-using-html-css-and-javascript\/\">Music player using HTML CSS and JavaScript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/happy-diwali-in-javascript\/\">Happy Diwali in JavaSCript<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/top-15-machine-learning-projects-in-python-with-source-code\/\">Top 15 Machine Learning Projects in Python with source code<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/top-15-java-projects-for-resume\/\">Top 15 Java Projects For Resume<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/top-10-java-projects-with-source-code\/\">Top 10 Java Projects with source code<\/a><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/copyassignment.com\/top-100-python-projects-with-source-code\/\">Best 100+ Python Projects with source code<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>We will be creating a simple To-Do list in HTML CSS JavaScript. Features of To-Do list app are: We will be using HTML, CSS and&#8230;<\/p>\n","protected":false},"author":62,"featured_media":20630,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,1939,1941],"tags":[],"class_list":["post-20609","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allcategorites","category-html-css-javascript-project","category-web-projects","wpcat-22-id","wpcat-1939-id","wpcat-1941-id"],"_links":{"self":[{"href":"https:\/\/copyassignment.com\/wp-json\/wp\/v2\/posts\/20609","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/copyassignment.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/copyassignment.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/copyassignment.com\/wp-json\/wp\/v2\/users\/62"}],"replies":[{"embeddable":true,"href":"https:\/\/copyassignment.com\/wp-json\/wp\/v2\/comments?post=20609"}],"version-history":[{"count":0,"href":"https:\/\/copyassignment.com\/wp-json\/wp\/v2\/posts\/20609\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/copyassignment.com\/wp-json\/wp\/v2\/media\/20630"}],"wp:attachment":[{"href":"https:\/\/copyassignment.com\/wp-json\/wp\/v2\/media?parent=20609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/copyassignment.com\/wp-json\/wp\/v2\/categories?post=20609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/copyassignment.com\/wp-json\/wp\/v2\/tags?post=20609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}