{"id":1169,"date":"2024-03-08T18:23:53","date_gmt":"2024-03-09T00:23:53","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=1169"},"modified":"2024-03-08T18:23:53","modified_gmt":"2024-03-09T00:23:53","slug":"building-a-todo-app-from-scratch-step-5-extra-functionality","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/building-a-todo-app-from-scratch-step-5-extra-functionality\/","title":{"rendered":"Building a TODO App from Scratch \u2014 Step 5 \u2014 Extra Functionality"},"content":{"rendered":"\n

We left off in a decent place<\/a>, but there was some missing functionality that we wanted all along. <\/p>\n\n\n\n

    \n
  1. We need to be able to view completed to-dos (and be able to delete them entirely)<\/li>\n\n\n\n
  2. We need to be able edit to-dos. <\/li>\n<\/ol>\n\n\n
    \n
    \n

    Article Series<\/h3>\n <\/header>\n
    \n
      \n
    1. \n Building a TODO App from Scratch \u2014 Step 1 \u2014 Planning & Design<\/a>\n <\/li>\n
    2. \n Building a TODO App from Scratch \u2014 Step 2 \u2014 HTML<\/a>\n <\/li>\n
    3. \n Building a TODO App from Scratch \u2014 Step 3 \u2014 Basic JavaScript Functionality<\/a>\n <\/li>\n
    4. \n Building a TODO App from Scratch \u2014 Step 4 \u2014 Styling & Interactive Choices<\/a>\n <\/li>\n
    5. \n Building a TODO App from Scratch \u2014 Step 5 \u2014 Extra Functionality<\/a>\n <\/li>\n <\/ol>\n <\/div>\n<\/div>\n\n\n\n

      Editing To-Dos<\/h2>\n\n\n\n

      The interaction we decided on for editing is to double-click the todo. This will turn the to-do, in place, into an editable input. Then you hit enter (e.g. submit) or leave the input (e.g. blur) and it will save the changes. <\/p>\n\n\n\n

      We can use a bit of event delegation to set up this event:<\/p>\n\n\n

      list.addEventListener(\"dblclick\"<\/span>, (event) => {\n  const<\/span> listItem = event.target.closest(\"li\"<\/span>);\n\n  \/\/ If already editing, let it be.<\/span>\n  if<\/span> (listItem.classList.contains(\"editing\"<\/span>)) return<\/span>;\n\n  listItem.classList.add(\"editing\"<\/span>);\n\n  \/\/ Do editing.<\/span>\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      Now anywhere you double-click on the list will set the relevant list item into “editing mode”, here indicated by just adding a class we can style against, like hide the existing text.<\/p>\n\n\n\n
      More importantly, we need to insert some new HTML turning the text into an editable input. We can use a template literal of a <form><\/code> to inject as needed, like so:<\/p>\n\n\n
      list.addEventListener(\"dblclick\"<\/span>, (event) => {\n<\/span><\/span>  const<\/span> listItem = event.target.closest(\"li\"<\/span>);\n<\/span><\/span>\n<\/span><\/span>  \/\/ If already editing, let it be.<\/span>\n<\/span><\/span>  if<\/span> (listItem.classList.contains(\"editing\"<\/span>)) return<\/span>;\n<\/span><\/span>\n<\/span><\/span>  listItem.classList.add(\"editing\"<\/span>);\n<\/span><\/span>  const<\/span> textItem = listItem.querySelector(\".text\"<\/span>);\n<\/span><\/span>  listItem.insertAdjacentHTML(\n<\/span><\/mark>    \"beforeend\"<\/span>,\n<\/span><\/mark>    `<form onsubmit=\"updateTodo(event);\" class=\"form-edit\"><\/span>\n<\/span><\/mark>       <input onblur=\"updateTodo(event);\" type=\"text\" class=\"input-edit\" value=\"${textItem.textContent}<\/span>\"><\/span>\n<\/span><\/mark>     <\/form>`<\/span>\n<\/span><\/mark>  );\n<\/span><\/span>});\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      That calls an updateTodo()<\/code> event we’ll have to write. But first, let’s make sure we focus the input and put the cursor at the end. Just a bit of nice UX right?<\/p>\n\n\n
      list.addEventListener(\"dblclick\"<\/span>, (event) => {\n<\/span><\/span>  const<\/span> listItem = event.target.closest(\"li\"<\/span>);\n<\/span><\/span>\n<\/span><\/span>  \/\/ If already editing, let it be.<\/span>\n<\/span><\/span>  if<\/span> (listItem.classList.contains(\"editing\"<\/span>)) return<\/span>;\n<\/span><\/span>\n<\/span><\/span>  listItem.classList.add(\"editing\"<\/span>);\n<\/span><\/span>  const<\/span> textItem = listItem.querySelector(\".text\"<\/span>);\n<\/span><\/span>  listItem.insertAdjacentHTML(\n<\/span><\/span>    \"beforeend\"<\/span>,\n<\/span><\/span>    `<form onsubmit=\"updateTodo(event);\" class=\"form-edit\"><input onblur=\"updateTodo(event);\" type=\"text\" class=\"input-edit\" value=\"${textItem.textContent}<\/span>\"><\/form>`<\/span>\n<\/span><\/span>  );\n<\/span><\/span>\n<\/span><\/span>  const<\/span> input = listItem.querySelector(\".input-edit\"<\/span>);\n<\/span><\/mark>  input.focus();\n<\/span><\/mark>\n<\/span><\/mark>  \/\/ put cursor at end of input<\/span>\n<\/span><\/mark>  input.setSelectionRange(input.value.length, input.value.length);\n<\/span><\/mark>});\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      Updating the to-do is pretty straightforward. We get our hands on the new text, update it in the DOM, toggle the editing class, and write the data back to localStorage. It looks like a lot of lines, but a lot of it is just getting our hands on DOM elements and basic manipulation.<\/p>\n\n\n
      function<\/span> updateTodo<\/span>(event<\/span>) <\/span>{\n  event.preventDefault();\n  const<\/span> listItem = event.target.closest(\"li\"<\/span>);\n  const<\/span> textItem = listItem.querySelector(\".text\"<\/span>);\n  const<\/span> inputItem = listItem.querySelector(\".input-edit\"<\/span>);\n  const<\/span> form = listItem.querySelector(\".form-edit\"<\/span>);\n  textItem.textContent = inputItem.value;\n  listItem.classList.remove(\"editing\"<\/span>);\n  form.remove();\n  TODOs = TODOs.map((todo<\/span>) =><\/span> {\n    if<\/span> (todo.id === listItem.id) {\n      todo.title = inputItem.value;\n    }\n    return<\/span> todo;\n  });\n  localStorage[\"data\"<\/span>] = JSON<\/span>.stringify(TODOs);\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      And it works!<\/p>\n\n\n\n\t\t
      \n\t\t\t