<header>
  <h1>TODOs</h1>
</header>

<form id="todo-form" class="todo-form">
  <label>
    <span class="screen-reader-text">New TODO</span>
    <input type="text" name="todo">
  </label>
  <button>Add</button>
</form>

<ol id="todo-list" class="todo-list"></ol>
header {
  border: 1px solid black;
  margin: 1px;
  padding: 1rem;
  text-align: center;
}

.todo-form {
  border: 1px solid black;
  text-align: center;
  padding: 1rem;
  margin: 1px;
  label {
    flex: 1;
  }
  input {
    border: 1px solid black;
  }
  > button {
    border: 1px solid black;
  }
}

.todo-list {
  border: 1px solid black;
  padding: 1rem;
  li {
    border: 1px solid black;
    margin: 1px;
    padding: 0.5rem;
  }
}

.screen-reader-text {
  text-indent: -9999em;
  width: 0;
  height: 0;
  display: block;
}

.svg-check {
  display: block;
  pointer-events: none;
}

const form = document.querySelector("#todo-form");
const list = document.querySelector("#todo-list");

let TODOs = [];

if (localStorage["data"] !== null && localStorage["data"] !== undefined) {
  TODOs = JSON.parse(localStorage["data"]);
}

function buildUI() {
  let HTML = ``;
  TODOs.forEach((todo) => {
    HTML += `<li id="${todo.id}">
      ${todo.title}
      <button aria-label="Complete" class="button-complete">
        <svg width="20" height="20" viewBox="0 0 1200 1200" class="svg-check">
          <path d="m794.48 395.02-269.46 269.46-129.42-100.13-64.707 83.836 166.26 128.47 36.84 28.34 32.824-32.828 302.29-302.29-74.625-74.863z"/>
        </svg>
      </button>
    </li>`;
  });
  list.innerHTML = HTML;
}

form.addEventListener("submit", (event) => {
  event.preventDefault();

  TODOs.push({
    title: event.target[0].value,
    complete: false,
    id: self.crypto.randomUUID()
  });

  localStorage["data"] = JSON.stringify(TODOs);

  buildUI();

  form.reset();
});

document.documentElement.addEventListener("click", (event) => {
  if (event.target.classList.contains("button-complete")) {
    TODOs = TODOs.filter((todo) => todo.id !== event.target.parentElement.id);
    localStorage["data"] = JSON.stringify(TODOs);
    buildUI();
  }
});

buildUI();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.