Todo List with Array, Function, Object, DOM

marleyDip · marleyDip · commit 5b6950e6acc1 · 2025-06-16T13:56:40.000+06:00
diff --git a/Projects/todo list/todo.css b/Projects/todo list/todo.css
@@ -0,0 +1,39 @@
+body {
+    font-family: Arial;
+}
+
+#main-heading {
+    text-align: center;
+} 
+
+.grid-container {
+    display: grid;
+    grid-template-columns: 200px 150px 100px;
+    column-gap: 10px;
+    row-gap: 10px;
+    margin-top: 10px;
+    align-items: center;
+}
+
+#todo-input, #todo-date {
+    font-size: 15px;
+    padding: 10px 5px;
+}
+
+.btn-delete {
+    background-color: red;
+    color: white;
+    border: none;
+    border-radius: 10px;
+    padding: 15px 0px;
+    cursor: pointer;
+}
+
+.btn-add {
+    background-color: green;
+    color: white;
+    border: none;
+    border-radius: 10px;
+    padding: 15px 0px;
+    cursor: pointer;
+}
diff --git a/Projects/todo list/todo.html b/Projects/todo list/todo.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Todo App</title>
+    <link rel="styleSheet" href="todo.css" />
+  </head>
+
+  <body>
+    <h1 id="main-heading">Todo App</h1>
+
+    <div class="grid-container">
+      <input id="todo-input" type="text" placeholder="Enter Todo Here" />
+      <input id="todo-date" type="date" />
+
+      <button class="btn-add" onclick="addTodo();">Add</button>
+    </div>
+
+    <div class="todo-container grid-container"></div>
+
+    <!-- <p id="todo-items"></p> -->
+
+    <script src="todo.js"></script>
+  </body>
+</html>
diff --git a/Projects/todo list/todo.js b/Projects/todo list/todo.js
@@ -0,0 +1,62 @@
+let todoList = [
+  {
+    item: "Buy Milk",
+    dueDate: "6/16/2025",
+  },
+  {
+    item: "Go to College",
+    dueDate: "6/16/2025",
+  },
+];
+
+displayItems();
+
+function addTodo() {
+  let inputElement = document.querySelector("#todo-input");
+
+  let dateElement = document.querySelector("#todo-date");
+
+  let todoItem = inputElement.value;
+  let todoDate = dateElement.value;
+  //console.log(todoElement);
+
+  todoList.push({ item: todoItem, dueDate: todoDate });
+  inputElement.value = "";
+
+  displayItems();
+}
+
+function displayItems() {
+  let containerElement = document.querySelector(".todo-container");
+
+  let newHtml = "";
+  for (let i = 0; i < todoList.length; i++) {
+    //let item = todoList[i].item;
+    //let dueDate = todoList[i].dueDate;
+
+    // destructing object
+    let { item, dueDate } = todoList[i];
+    newHtml += `
+      <span>${item}</span>
+      <span>${dueDate}</span>
+      <button class ="btn-delete" onClick="todoList.splice(${i}, 1); displayItems()">Delete</button>
+    `;
+  }
+  containerElement.innerHTML = newHtml;
+}
+
+/* function displayItems() {
+  let displayElement = document.querySelector("#todo-items");
+
+  displayElement.innerText = ""; // Clears the text inside the element (reset it).
+  for (let i = 0; i < todoList.length; i++) {
+    displayElement.innerText = todoList.join("\n");
+
+    displayElement.innerText = todoList
+      .map((item, index) => `${index + 1}. ${item}`)
+      .join("\n");
+
+    displayElement.innerText = displayElement.innerText + "\n" + todoList[i];
+  }
+}
+ */
