Hey

script.js

@@ -1,2 +1,87 @@
-// You can start writing your code below
+const todoForm = document.querySelector(".todo-form")
+const todoInput = document.querySelector("input");
+const todoCollection = document.querySelector(".todo-collection");
 
+todoForm.addEventListener("submit", addTodo);
+
+function addTodo(e) 
+{
+  if (todoInput.value=== "")
+   {
+    alert("You cannot enter empty value");
+  } 
+  else
+   {
+    const li = document.createElement("li");
+    const todoTitle = document.createElement("span");
+    const editableInput = document.createElement("input");
+    const editButton = document.createElement("button");
+    const saveButton = document.createElement("button");
+    const deleteButton = document.createElement("button");
+
+    li.classList.add("todo-collection__item");
+    todoTitle.classList.add("todo-collection__item__title");
+    todoTitle.innerText = todoInput.value;
+
+    editableInput.classList.add("input");
+    editableInput.classList.add("input--todo");
+    editableInput.classList.add("hidden");
+    editableInput.type = "text";
+    editableInput.value = todoInput.value;
+
+    editButton.classList.add("button");
+    editButton.classList.add("button--todo");
+    editButton.classList.add("button--edit");
+    editButton.innerText = "Edit";
+
+    saveButton.classList.add("button");
+    saveButton.classList.add("button--todo");
+    saveButton.classList.add("button--save");
+    saveButton.classList.add("hidden");
+    saveButton.innerText = "Save";
+
+    deleteButton.classList.add("button");
+    deleteButton.classList.add("button--todo");
+    deleteButton.classList.add("button--delete");
+    deleteButton.innerText = "Delete";
+
+    li.appendChild(todoTitle);
+    li.appendChild(editableInput);
+    li.appendChild(editButton);
+    li.appendChild(saveButton);
+    li.appendChild(deleteButton);
+    todoCollection.appendChild(li);
+
+    function toggleTodoEditForm() {
+      if (editableInput.value=== "")
+   {
+    alert("You cannot enter empty value while editing");
+  } 
+  else
+   {
+      todoTitle.classList.toggle("hidden");
+      editableInput.classList.toggle("hidden");
+      editButton.classList.toggle("hidden");
+      saveButton.classList.toggle("hidden");
+    }
+  }
+
+    editButton.addEventListener("click", () => {
+      toggleTodoEditForm();
+      editableInput.focus();
+    });
+
+    saveButton.addEventListener("click", () => {
+      todoTitle.innerText = editableInput.value;
+      toggleTodoEditForm();
+    });
+
+    deleteButton.addEventListener("click", () => {
+        todoCollection.removeChild(li);
+    });
+  }
+  // clear input
+//   IF we will not give below then at input place it will not be cleared.
+  todoInput.value = "";
+  e.preventDefault();
+}

styles.css

@@ -2,8 +2,8 @@ html,
 body {
   box-sizing: border-box;
   margin: 0;
-  background-color: #AD0AE9;
-  color: white;
+  background-color:#f0f2f5;
+  color: #1877f2;
   font-family: "Arial", sans-serif;
 }
 
@@ -59,7 +59,7 @@ body {
   flex-direction: column;
   justify-content: center;
   text-align: left;
-  color: rgba(255, 255, 255, 0.3);
+  color: hotpink;
   transition: 0.3s;
   cursor: text;
 }
@@ -82,7 +82,7 @@ body {
   padding: 0 0.5rem;
   font-size: 1.1rem;
   color: white;
-  background-color: rgb(46, 46, 46);
+  background-color: black;
   border: none;
   border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
   transition: 0.3s;
@@ -101,8 +101,8 @@ body {
   font-size: 1.1rem;
   font-weight: bold;
   line-height: 0.9rem;
-  background-color: white;
-  color: rgb(46, 46, 46);
+  background-color:black;
+  color: white;
   border-color: transparent;
   padding: 0.5rem;
   margin-right: 150px;
@@ -119,7 +119,7 @@ body {
 
 .button--todo {
   color: #ddd;
-  background-color: inherit;
+  background-color: #42b72a;
   border: 1px solid #ddd;
   transition: 0.3s;
 }