added the simple todo app implementation

namitmalasi · namitmalasi · commit 0e288ea4bda9 · 2021-09-03T21:38:58.000+05:30
diff --git a/todo-list/index.html b/todo-list/index.html
@@ -0,0 +1,18 @@
+<!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>
+    <div id="todo-container">
+      <label for="todo-item">Enter the todo item:</label>
+      <input type="text" id="todo-item" />
+      <!-- <button type="submit" onclick="">Submit</button> -->
+    </div>
+    <div id="todo-item-list"></div>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/todo-list/index.js b/todo-list/index.js
@@ -0,0 +1,60 @@
+let todos = [];
+const todoItemDiv = document.querySelector("#todo-item-list");
+const inputText = document.querySelector("#todo-item");
+
+function addTodo(todo) {
+  todos.push(todo);
+  inputText.value = "";
+  renderList();
+}
+
+function deleteTodo(todoId) {
+  const newTodos = todos.filter((todo) => {
+    return todo.id !== todoId;
+  });
+  todos = newTodos;
+  renderList();
+}
+
+function renderList() {
+  todoItemDiv.innerHTML = "";
+  for (let i = 0; i < todos.length; i++) {
+    const todo = todos[i];
+
+    const li = document.createElement("li");
+
+    li.innerHTML = `
+    <span id="${todo.id}">${todo.text}</span>
+    <button data-id=${todo.id} class="delete">Delete</button>`;
+
+    todoItemDiv.appendChild(li);
+  }
+}
+
+function handleClick(e) {
+  console.log(e.target.className);
+  if (e.target.className === "delete") {
+    const todoId = Number(e.target.dataset.id);
+    deleteTodo(todoId);
+  }
+}
+
+function initialize() {
+  document.addEventListener("click", handleClick);
+  document.addEventListener("keyup", function (e) {
+    const text = e.target.value;
+    if (e.key === "Enter") {
+      todo = {
+        text: text,
+        id: Date.now(),
+        done: false,
+      };
+
+      addTodo(todo);
+    }
+  });
+
+  renderList();
+}
+
+initialize();
