Todo List prototype

ruty/js/scripttodo.js

@@ -15,3 +15,48 @@ menuTrigger.addEventListener("click", () => {
         overlay.style.display = "block";
     }
 });
+
+// Todo 
+document.addEventListener("DOMContentLoaded", function() {
+    const newTodoInput = document.getElementById("new-todo");
+    const addTodoButton = document.getElementById("add-todo");
+    const todoList = document.getElementById("todo-list");
+
+    const newTagInput = document.getElementById("new-tag");
+    const addTagButton = document.getElementById("add-tag");
+    const tagList = document.getElementById("tag-list");
+
+    const newCategoryInput = document.getElementById("new-category");
+    const addCategoryButton = document.getElementById("add-category");
+    const categoryList = document.getElementById("category-list");
+
+    addTodoButton.addEventListener("click", function() {
+        const todoText = newTodoInput.value.trim();
+        if (todoText !== "") {
+            const todoItem = document.createElement("li");
+            todoItem.textContent = todoText;
+            todoList.appendChild(todoItem);
+            newTodoInput.value = "";
+        }
+    });
+
+    addTagButton.addEventListener("click", function() {
+        const tagText = newTagInput.value.trim();
+        if (tagText !== "") {
+            const tagItem = document.createElement("li");
+            tagItem.textContent = tagText;
+            tagList.appendChild(tagItem);
+            newTagInput.value = "";
+        }
+    });
+
+    addCategoryButton.addEventListener("click", function() {
+        const categoryText = newCategoryInput.value.trim();
+        if (categoryText !== "") {
+            const categoryItem = document.createElement("li");
+            categoryItem.textContent = categoryText;
+            categoryList.appendChild(categoryItem);
+            newCategoryInput.value = "";
+        }
+    });
+});

ruty/todo.php

@@ -10,9 +10,29 @@
             <h1 class="welcome">Ruty</h1>
         </header>
         <?php include 'menunav.php'; ?>
+        
+        <div id="todoapp">
+            <header>
+                <h2>Add a Task</h2>
+                <input type="text" id="new-todo" placeholder="What needs to be done?">
+                <button id="add-todo">Add</button>
+            </header>
+            <section id="main">
+                <h2>Todos</h2>
+                <ul id="todo-list"></ul>
+            </section>
+            <footer id="footer">
+                <h2>Tags</h2>
+                <input type="text" id="new-tag" placeholder="Enter tag...">
+                <button id="add-tag">Add Tag</button>
+                <ul id="tag-list"></ul>
+                <h2>Categories</h2>
+                <input type="text" id="new-category" placeholder="Enter category...">
+                <button id="add-category">Add Category</button>
+                <ul id="category-list"></ul>
+            </footer>
+        </div>
 
-		
+        <script src="js/scripttodo.js"></script>
-		<script src="js/scripttodo.js"></script>
     </body>
-
+</html>
-</html>