usmansbk · July 22, 2021 15:51
diff --git a/todo-list.html b/todo-list.html
 <html>
  <body>
    <form id="form">
      <input id="input" required />
    </form>
    <ul id="list"></ul>
    <button id="clear-all">clear all completed</button>

    <script>
      let todos = [];

      const form = document.getElementById("form");
      form.addEventListener("submit", (event) => {
        event.preventDefault();
        const input = document.getElementById("input");
        const todo = {
          index: todos.length,
          description: input.value,
          checked: false,
        };
        addTodo(todo);
        input.value = "";
      });

      function addTodo(todo) {
        todos.push(todo);
        displayTodos();
      }

      function displayTodos() {
        const ul = document.getElementById("list");
        ul.innerHTML = "";

        todos.forEach((todo) => {
          const item = createItem(todo);
          ul.appendChild(item);
        });

        localStorage.setItem("list", JSON.stringify(todos));
      }

      function createItem(todo) {
        const li = document.createElement("li");
        li.setAttribute("draggable", true);

        li.addEventListener("dragstart", (event) => {
          event.dataTransfer.setData("index", todo.index);
        });
        li.addEventListener("dragover", (event) => {
          event.preventDefault();
        });
        li.addEventListener("drop", (event) => {
          const draggingIndex = event.dataTransfer.getData("index");
          const dropIndex = todo.index;

          swapTodos(draggingIndex, dropIndex);
        });

        const checkbox = document.createElement("input");
        checkbox.setAttribute("type", "checkbox");
        checkbox.checked = todo.checked;
        checkbox.addEventListener("change", () => {
          toggleTodo(todo.index);
        });
        li.appendChild(checkbox);

        const input = document.createElement("input");
        input.value = todo.description;

        li.appendChild(input);

        const deleteButton = document.createElement("button");
        deleteButton.innerText = "Delete";
        deleteButton.addEventListener("click", () => {
          removeTodo(todo.index);
        });

        li.appendChild(deleteButton);

        return li;
      }

      function toggleTodo(index) {
        const todo = todos[index];
        todo.checked = !todo.checked;
        displayTodos();
      }

      function updateIndexes() {
        for (let i = 0; i < todos.length; i++) {
          todos[i].index = i;
        }
      }

      function removeTodo(index) {
        todos = todos.filter((todo) => todo.index !== index);
        updateIndexes();
        displayTodos();
      }

      function swapTodos(draggingIndex, dropIndex) {
        const draggingItem = todos[draggingIndex];
        const dropItem = todos[dropIndex];

        draggingItem.index = dropIndex;
        dropIndex.index = draggingIndex;

        todos[draggingIndex] = dropItem;
        todos[dropIndex] = draggingItem;

        displayTodos();
      }

      function clearAllCompleted() {
        todos = todos.filter((todo) => !todo.checked);
        updateIndexes();
        displayTodos();
      }

      window.addEventListener("load", () => {
        const savedTodos = localStorage.getItem("list");
        if (savedTodos) {
          todos = JSON.parse(savedTodos);
        }
        displayTodos();

        const clearButton = document.getElementById("clear-all");
        clearButton.addEventListener("click", () => {
          clearAllCompleted();
        });
      });
    </script>
  </body>
 </html>
	<html>
	<body>
	<form id="form">
	<input id="input" required />
	</form>
	<ul id="list"></ul>
	<button id="clear-all">clear all completed</button>

	<script>
	let todos = [];

	const form = document.getElementById("form");
	form.addEventListener("submit", (event) => {
	event.preventDefault();
	const input = document.getElementById("input");
	const todo = {
	index: todos.length,
	description: input.value,
	checked: false,
	};
	addTodo(todo);
	input.value = "";
	});

	function addTodo(todo) {
	todos.push(todo);
	displayTodos();
	}

	function displayTodos() {
	const ul = document.getElementById("list");
	ul.innerHTML = "";

	todos.forEach((todo) => {
	const item = createItem(todo);
	ul.appendChild(item);
	});

	localStorage.setItem("list", JSON.stringify(todos));
	}

	function createItem(todo) {
	const li = document.createElement("li");
	li.setAttribute("draggable", true);

	li.addEventListener("dragstart", (event) => {
	event.dataTransfer.setData("index", todo.index);
	});
	li.addEventListener("dragover", (event) => {
	event.preventDefault();
	});
	li.addEventListener("drop", (event) => {
	const draggingIndex = event.dataTransfer.getData("index");
	const dropIndex = todo.index;

	swapTodos(draggingIndex, dropIndex);
	});

	const checkbox = document.createElement("input");
	checkbox.setAttribute("type", "checkbox");
	checkbox.checked = todo.checked;
	checkbox.addEventListener("change", () => {
	toggleTodo(todo.index);
	});
	li.appendChild(checkbox);

	const input = document.createElement("input");
	input.value = todo.description;

	li.appendChild(input);

	const deleteButton = document.createElement("button");
	deleteButton.innerText = "Delete";
	deleteButton.addEventListener("click", () => {
	removeTodo(todo.index);
	});

	li.appendChild(deleteButton);

	return li;
	}

	function toggleTodo(index) {
	const todo = todos[index];
	todo.checked = !todo.checked;
	displayTodos();
	}

	function updateIndexes() {
	for (let i = 0; i < todos.length; i++) {
	todos[i].index = i;
	}
	}

	function removeTodo(index) {
	todos = todos.filter((todo) => todo.index !== index);
	updateIndexes();
	displayTodos();
	}

	function swapTodos(draggingIndex, dropIndex) {
	const draggingItem = todos[draggingIndex];
	const dropItem = todos[dropIndex];

	draggingItem.index = dropIndex;
	dropIndex.index = draggingIndex;

	todos[draggingIndex] = dropItem;
	todos[dropIndex] = draggingItem;

	displayTodos();
	}

	function clearAllCompleted() {
	todos = todos.filter((todo) => !todo.checked);
	updateIndexes();
	displayTodos();
	}

	window.addEventListener("load", () => {
	const savedTodos = localStorage.getItem("list");
	if (savedTodos) {
	todos = JSON.parse(savedTodos);
	}
	displayTodos();

	const clearButton = document.getElementById("clear-all");
	clearButton.addEventListener("click", () => {
	clearAllCompleted();
	});
	});
	</script>
	</body>
	</html>