diff --git a/dom/vanilla-todo/index.html b/dom/vanilla-todo/index.html
new file mode 100644
index 0000000..cfaf572
--- /dev/null
+++ b/dom/vanilla-todo/index.html
@@ -0,0 +1,21 @@
+
+
+
+ Vanilla ToDo
+
+
+
+
+
Awesome ToDo
+
+
+
+
+
+
+
diff --git a/dom/vanilla-todo/main.js b/dom/vanilla-todo/main.js
new file mode 100644
index 0000000..d518c3d
--- /dev/null
+++ b/dom/vanilla-todo/main.js
@@ -0,0 +1,42 @@
+// getting DOM nodes/elements
+const todoForm = document.getElementById("todo-form");
+const todoList = document.getElementById("todo-list");
+
+const todos = [];
+
+// handling todo creation
+todoForm.addEventListener("submit", (e) => {
+ // prevent default submission behavior
+ e.preventDefault();
+
+ const formData = new FormData(todoForm);
+ const description = formData.get("description");
+
+ todos.push(description);
+ renderTodoList();
+
+ // clear the form
+ todoForm.reset();
+});
+
+function renderTodoList() {
+ let listHTML = "";
+
+ for (let i = 0; i < todos.length; i++) {
+ listHTML += `
+
${todos[i]}
+
+
+ `;
+ }
+
+ todoList.innerHTML = listHTML;
+}
+
+function deleteTodo(index) {
+ // remove todo from the Array
+ todos.splice(index, 1);
+
+ // re-render the list
+ renderTodoList();
+}
diff --git a/practice.md b/practice.md
index 06cabb5..b386547 100644
--- a/practice.md
+++ b/practice.md
@@ -6,7 +6,7 @@ Note: Please complete the essential readings for this day before proceeding.
**Exercise 1**
-Implement Edit todo functionality in our Vanilla JS counter. You can start with [`dom/vanilla-counter-end`](./dom/vanilla-counter-end) as the starting point.
+Implement Edit todo functionality in our Vanilla JS counter. You can start with [`dom/vanilla-todo`](./dom/vanilla-todo) as the starting point.
**Exercise 2**