ToDo.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ToDo List</title>
  </head>
  <body>
    <main>
      <div class="container">
        <h1 class="app-title">ToDo List</h1>
        <ul class="todo-list js-todo-list"></ul>
        <!--for empty state-->
        <div class="empty-state">
          <svg class="checklist-icon"><use href="#checklist-icon"></use></svg>
          <h2 class="empty-state_title">Add your first todo</h2>
          <p class="empty-state_description">
            What do you want to get done today?
          </p>
        </div>
        <!--end-->
        <form class="js-form">
          <input
            autofocus
            type="text"
            aria-label="Enter a new todo item"
            placeholder="E.g. Build a new web app"
            class="js-todo-input"
          />
        </form>
      </div>
    </main>

    <svg>
      <defs>
        <symbol id="checklist-icon" viewBox="-52 0 512 512">
          <path
            d="m217.140625 47.226562c0 7.1875-5.832031 13.015626-13.019531 13.015626-7.191406 0-13.019532-5.828126-13.019532-13.015626 0-7.191406 5.828126-13.019531 13.019532-13.019531 7.1875 0 13.019531 5.828125 13.019531 13.019531zm0 0"
          />
          <path
            d="m140.917969 98.820312c4.144531 0 7.5-3.355468 7.5-7.5v-11.4375c0-4.140624-3.355469-7.5-7.5-7.5-4.140625 0-7.5 3.359376-7.5 7.5v11.4375c0 4.144532 3.359375 7.5 7.5 7.5zm0 0"
          />
          <path
            d="m267.320312 98.820312c4.144532 0 7.5-3.355468 7.5-7.5v-11.4375c0-4.140624-3.355468-7.5-7.5-7.5-4.140624 0-7.5 3.359376-7.5 7.5v11.4375c0 4.144532 3.359376 7.5 7.5 7.5zm0 0"
          />
          <path
            d="m204.121094 104.925781c8.242187 0 15.984375-3.449219 21.246094-9.464843 2.726562-3.117188 2.40625-7.855469-.710938-10.582032-3.121094-2.726562-7.855469-2.410156-10.582031.710938-2.410157 2.753906-6.039063 4.335937-9.953125 4.335937-3.917969 0-7.542969-1.582031-9.953125-4.335937-2.726563-3.121094-7.464844-3.4375-10.582031-.710938-3.121094 2.726563-3.4375 7.464844-.710938 10.582032 5.257812 6.015624 13 9.464843 21.246094 9.464843zm0 0"
          />
          <path
            d="m162.492188 184.390625c-1.308594-3.929687-5.558594-6.054687-9.484376-4.742187-21.402343 7.132812-37.015624 17.507812-46.878906 25.582031v-9.789063c0-4.140625-3.359375-7.5-7.5-7.5s-7.5 3.359375-7.5 7.5v12.710938c0 11.421875 13.816406 17.8125 22.5 10.359375 8.640625-7.410157 23.304688-17.695313 44.121094-24.636719 3.929688-1.308594 6.054688-5.554688 4.742188-9.484375zm0 0"
          />
          <path
            d="m211.460938 208.035156h98.148437c4.144531 0 7.5-3.359375 7.5-7.5s-3.355469-7.5-7.5-7.5h-98.148437c-4.140626 0-7.5 3.359375-7.5 7.5s3.359374 7.5 7.5 7.5zm0 0"
          />
          <path
            d="m162.492188 245.972656c-1.308594-3.929687-5.558594-6.054687-9.484376-4.746094-21.402343 7.136719-37.015624 17.511719-46.878906 25.585938v-9.789062c0-4.144532-3.359375-7.5-7.5-7.5s-7.5 3.355468-7.5 7.5v12.710937c0 11.40625 13.8125 17.808594 22.5 10.359375 8.640625-7.410156 23.304688-17.699219 44.121094-24.636719 3.929688-1.308593 6.054688-5.554687 4.742188-9.484375zm0 0"
          />
          <path
            d="m211.460938 269.617188h98.148437c4.144531 0 7.5-3.359376 7.5-7.5 0-4.144532-3.355469-7.5-7.5-7.5h-98.148437c-4.140626 0-7.5 3.355468-7.5 7.5 0 4.140624 3.359374 7.5 7.5 7.5zm0 0"
          />
          <path
            d="m162.492188 307.554688c-1.308594-3.929688-5.558594-6.054688-9.484376-4.746094-21.402343 7.136718-37.015624 17.511718-46.878906 25.585937v-9.789062c0-4.144531-3.359375-7.5-7.5-7.5s-7.5 3.355469-7.5 7.5v12.710937c0 11.402344 13.8125 17.808594 22.5 10.359375 8.640625-7.410156 23.308594-17.699219 44.121094-24.636719 3.929688-1.308593 6.054688-5.554687 4.742188-9.484374zm0 0"
          />
          <path
            d="m211.460938 331.199219h98.148437c4.144531 0 7.5-3.359375 7.5-7.5 0-4.144531-3.355469-7.5-7.5-7.5h-98.148437c-4.140626 0-7.5 3.355469-7.5 7.5 0 4.140625 3.359374 7.5 7.5 7.5zm0 0"
          />
          <path
            d="m98.628906 372.6875c-4.140625 0-7.5 3.359375-7.5 7.5v12.710938c0 11.402343 13.808594 17.820312 22.5 10.359374 8.640625-7.410156 23.308594-17.699218 44.121094-24.636718 3.929688-1.308594 6.054688-5.558594 4.746094-9.484375-1.3125-3.933594-5.558594-6.054688-9.488282-4.746094-21.398437 7.132813-37.015624 17.511719-46.878906 25.582031v-9.789062c0-4.140625-3.359375-7.496094-7.5-7.496094zm0 0"
          />
          <path
            d="m211.460938 392.777344h98.148437c4.144531 0 7.5-3.355469 7.5-7.5 0-4.140625-3.355469-7.5-7.5-7.5h-98.148437c-4.140626 0-7.5 3.359375-7.5 7.5 0 4.144531 3.359374 7.5 7.5 7.5zm0 0"
          />
          <path
            d="m369.109375 67.765625h-51.667969v-1.007813c0-13.617187-11.078125-24.695312-24.695312-24.695312h-41.683594c-2.578125-23.621094-22.648438-42.0625-46.941406-42.0625-24.296875 0-44.363282 18.441406-46.945313 42.0625h-41.679687c-13.617188 0-24.695313 11.078125-24.695313 24.695312v1.007813h-51.671875c-21.574218 0-39.128906 17.554687-39.128906 39.128906v48.898438c0 4.140625 3.359375 7.5 7.5 7.5s7.5-3.359375 7.5-7.5v-48.898438c0-13.304687 10.824219-24.128906 24.128906-24.128906h51.671875v18.847656h-43.507812c-4.144531 0-7.5 3.359375-7.5 7.5v345.066407c0 4.140624 3.355469 7.5 7.5 7.5h234.792969c4.144531 0 7.5-3.359376 7.5-7.5 0-4.144532-3.355469-7.5-7.5-7.5h-227.292969v-330.066407h36.472656c.003906.019531.011719.039063.015625.058594.007812.039063.011719.078125.019531.113281 2.320313 11.316406 12.648438 19.726563 24.195313 19.726563h177.25c11.441406 0 21.882812-8.457031 24.191406-19.726563.007812-.035156.015625-.074218.023438-.113281.003906-.019531.007812-.035156.011718-.058594h36.476563v330.066407h-41.359375c-4.144532 0-7.5 3.355468-7.5 7.5 0 4.140624 3.355468 7.5 7.5 7.5h48.859375c4.140625 0 7.5-3.359376 7.5-7.5v-345.066407c0-4.140625-3.359375-7.5-7.5-7.5h-43.507813v-18.847656h51.671875c13.304688 0 24.128907 10.824219 24.128907 24.128906v365.976563c0 13.304687-10.824219 24.128906-24.128907 24.128906h-329.984375c-13.304687 0-24.128906-10.824219-24.128906-24.128906v-287.082032c0-4.140624-3.359375-7.5-7.5-7.5s-7.5 3.359376-7.5 7.5v287.082032c0 21.574218 17.554688 39.128906 39.128906 39.128906h329.980469c21.578125 0 39.128906-17.554688 39.128906-39.128906v-365.976563c.003907-21.574219-17.550781-39.128906-39.128906-39.128906zm-263.308594-1.007813c0-5.347656 4.347657-9.695312 9.695313-9.695312h48.972656c5.792969 0 7.425781-5.015625 7.425781-9.839844 0-17.765625 14.457031-32.222656 32.226563-32.222656 17.765625 0 32.222656 14.453125 32.222656 32.222656 0 4.8125 1.691406 9.839844 7.425781 9.839844h48.976563c5.347656 0 9.695312 4.347656 9.695312 9.695312v42.355469c0 1.875.128906 3.769531-.4375 5.582031-1.226562 3.945313-4.914062 6.816407-9.257812 6.816407h-177.25c-4.34375 0-8.03125-2.871094-9.261719-6.816407-.558594-1.796874-.433594-3.71875-.433594-5.582031zm0 0"
          />
        </symbol>

        <symbol id="delete-icon" viewBox="0 0 448 448">
          <path
            d="m224 0c-123.710938 0-224 100.289062-224 224s100.289062 224 224 224 224-100.289062 224-224c-.132812-123.65625-100.34375-223.867188-224-224zm124.449219 325.824219c4.15625 4.015625 5.828125 9.964843 4.363281 15.558593s-5.835938 9.964844-11.429688 11.429688-11.542968-.207031-15.558593-4.363281l-101.824219-101.824219-101.824219 101.824219c-6.277343 6.0625-16.257812 5.976562-22.429687-.195313s-6.257813-16.152344-.195313-22.429687l101.824219-101.824219-101.824219-101.824219c-4.15625-4.015625-5.828125-9.964843-4.363281-15.558593s5.835938-9.964844 11.429688-11.429688 11.542968.207031 15.558593 4.363281l101.824219 101.824219 101.824219-101.824219c6.277343-6.0625 16.257812-5.976562 22.429687.195313s6.257813 16.152344.195313 22.429687l-101.824219 101.824219zm0 0"
            fill="#D80027"
          />
        </symbol>
      </defs>
    </svg>
    <style>
      html {
        box-sizing: border-box;
      }

      *,
      *::before,
      *::after {
        box-sizing: inherit;
        margin: 0;
        padding: 0;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
        line-height: 1.4;
        background-color: #e4e0e4;
      }

      .container {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        padding-left: 10px;
        padding-right: 10px;
        color: #d60000;
        height: 90vh;
        margin-top: 5vh;
        margin-bottom: 5vh;
        overflow-y: auto;
      }

      .app-title {
        text-align: center;
        margin-bottom: 20px;
        font-size: 80px;
        opacity: 0.7;
      }

      svg {
        width: 64px;
        height: 64px;
      }

      .todo-list {
        list-style: none;
        margin-bottom: 20px;
      }

      .todo-item {
        margin-bottom: 10px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #3e1b0c;
      }

      .todo-item span {
        flex-grow: 1;
        margin: 0 10px 0 10px;
        font-size: 22px;
      }

      .done span {
        text-decoration: line-through;
        color: #3e1b0c;
        opacity: 0.5;
      }

      input[type="checkbox"] {
        display: none;
      }

      .tick {
        min-width: 30px;
        min-height: 30px;
        max-height: 30px;
        border: 2px solid #3e1b0c;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }

      .tick::before {
        content: "✓";
        font-size: 25px;
        display: none;
      }

      .done .tick::before {
        display: inline;
      }

      .delete-todo {
        border: none;
        background-color: transparent;
        outline: none;
        cursor: pointer;
      }

      .delete-todo svg {
        width: 30px;
        height: 30px;
        pointer-events: none;
      }

      form {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }

      input[type="text"] {
        width: 100%;
        padding: 10px;
        border-radius: 4px;
        border: 2px solid #3e1b0cd5;
        background-color: #e4e0e4b6;
      }

      .empty-state {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        display: none;
        color: #9a5031;
      }

      .todo-list:empty {
        display: none;
      }

      .todo-list:empty + .empty-state {
        display: flex;
      }

      .checklist-icon {
        margin-bottom: 20px;
      }

      .empty-state_title,
      .empty-state_description {
        margin-bottom: 20px;
      }
    </style>

    <script>
      //array to hold the todo list items
      let todoItems = [];

      //function to render the todo list items
      function renderTodo(todo) {
        //to persist application state to the browser's localstorage
        localStorage.setItem("todoItems", JSON.stringify(todoItems));

        //select the first element with a class of 'js-todo-list'
        const list = document.querySelector(".js-todo-list");
        //select the current todo item in the DOM
        const item = document.querySelector(`[data-key='${todo.id}']`);

        //delete conditions check
        if (todo.deleted) {
          //remove the item from DOM if deleted is true
          item.remove();

          //when 'todoItems' is empty, clear all whitespace from the list container
          if (todoItems.length === 0) {
            list.innerHTML = "";
          }
          return;
        }

        //use the ternary operator to check if 'todo.checked' is true
        //if so, assign 'done' to 'isChecked'. Otherwise, assign empty string
        const isChecked = todo.checked ? "done" : "";

        //create a li element and assign to the 'node'
        const node = document.createElement("li");

        //set the class attribute
        node.setAttribute("class", `todo-item ${isChecked}`);

        //set the data-key attribute to the id of the todo
        node.setAttribute("data-key", todo.id);

        //set the contents of the 'li' element created above
        node.innerHTML = `
    <input id="${todo.id}" type="checkbox"/>
    <label for="${todo.id}" class="tick js-tick"></label>
    <span>${todo.text}</span>
    <button class="delete-todo js-delete-todo">
    <svg><use href="#delete-icon"></use></svg>
    </button>
    `;

        //if the item already exists in the DOM
        if (item) {
          //replace it
          list.replaceChild(node, item);
        } else {
          //append the element to the DOM as the last child of the element referenced by the 'list' variable
          list.append(node);
        }
      }

      //function to create a new list object based on text that was entered in input and push it into the todoItems array
      function addTodo(text) {
        const todo = {
          text,
          checked: false,
          id: Date.now(),
        };

        todoItems.push(todo);
        renderTodo(todo);
      }

      function toggleDone(key) {
        //findIndex is an array method that returns the position of an element in the array
        const index = todoItems.findIndex((item) => item.id === Number(key));
        //locate the todo item in the todoItems array and set its checked property to opposite
        todoItems[index].checked = !todoItems[index].checked;
        renderTodo(todoItems[index]);
      }

      function deleteTodo(key) {
        //find the corresponding todo object in the todoItems array
        const index = todoItems.findIndex((item) => item.id === Number(key));
        //create a new object with properties of the current todo item and a 'deleted' property which is set to true
        const todo = {
          deleted: true,
          ...todoItems[index],
        };

        //remove the todo item from the array by filtering it out
        todoItems = todoItems.filter((item) => item.id !== Number(key));
        renderTodo(todo);
      }

      //select the form element
      const form = document.querySelector(".js-form");
      //add a submit event listener
      form.addEventListener("submit", (event) => {
        //prevent page refresh on submit
        event.preventDefault();
        //select the text input
        const input = document.querySelector(".js-todo-input");

        //get the value of the input and remove whitespace
        const text = input.value.trim();
        if (text !== "") {
          addTodo(text);
          input.value = "";
          input.focus();
        }
      });

      //select the entire list
      const list = document.querySelector(".js-todo-list");
      //Add a click event listener to the list and its children
      list.addEventListener("click", (event) => {
        if (event.target.classList.contains("js-tick")) {
          const itemKey = event.target.parentElement.dataset.key;
          toggleDone(itemKey);
        }

        //check for deletion
        if (event.target.classList.contains("js-delete-todo")) {
          const itemKey = event.target.parentElement.dataset.key;
          deleteTodo(itemKey);
        }
      });

      //to render existing todo list when page is loaded
      document.addEventListener("DOMContentLoaded", () => {
        const ref = localStorage.getItem("todoItems  ");
        if (ref) {
          todoItems = JSON.parse(ref);
          todoItems.forEach((t) => {
            renderTodo(t);
          });
        }
      });
    </script>
  </body>
</html>