todo code

2old4thisShit · Jun 10, 2024 · 6240b9c · 6240b9c
1 parent 25e9c92
commit 6240b9c
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 1 deletion.
diff --git a/dom/vanilla-todo/index.html b/dom/vanilla-todo/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Vanilla ToDo</title>
+    <meta charset="UTF-8" />
+  </head>
+
+  <body>
+    <h2>Awesome ToDo</h2>
+    <form id="todo-form">
+      <label for="todo-desc">Description</label>
+      <input name="description" required id="todo-desc" type="text" />
+
+      <input type="submit" value="Create" />
+    </form>
+
+    <!-- TODOs -->
+    <ol id="todo-list"></ol>
+    <script src="./main.js"></script>
+  </body>
+</html>
diff --git a/dom/vanilla-todo/main.js 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 += `
+			<li>${todos[i]}
+				<button onclick="deleteTodo(${i})">🗑️</button>
+			</li>
+		`;
+  }
+
+  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
@@ -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**