Delete update and UI Styling updated

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-    "editor.fontSize": 42,
-    "terminal.integrated.fontSize": 62
+    "editor.fontSize": 16.5,
+    "terminal.integrated.fontSize": 16.5
 }

public/css/style.css

@@ -1,7 +1,129 @@
-h1{
-    color: red;
+/* ===== Reset some default browser styles ===== */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* ===== Body styling ===== */
+body {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: #333;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 40px 20px;
+}
+
+/* ===== Page Title ===== */
+h1 {
+  font-size: 2.5rem;
+  color: #fff;
+  margin-bottom: 20px;
+  letter-spacing: 1px;
+}
+
+/* ===== Todo List Container ===== */
+ul.todoItems {
+  list-style: none;
+  width: 100%;
+  max-width: 500px;
+  background: #fff;
+  padding: 20px;
+  border-radius: 15px;
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
+  margin-bottom: 30px;
+  transition: all 0.3s ease;
+}
+
+/* ===== Todo Item Styling ===== */
+li.item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #f9f9f9;
+  padding: 12px 15px;
+  margin-bottom: 12px;
+  border-radius: 10px;
+  transition: background 0.3s;
+}
+
+li.item:hover {
+  background: #f0f0f0;
+}
+
+/* ===== Completed Todo Styling ===== */
+.completed {
+  text-decoration: line-through;
+  color: #999;
+}
+
+/* ===== Trash Icon Styling ===== */
+.fa-trash {
+  color: #ff5c5c;
+  cursor: pointer;
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+
+.fa-trash:hover {
+  transform: scale(1.2);
+  color: #e60000;
+}
+
+/* ===== Left Todo Heading ===== */
+h2 {
+  color: #fff;
+  margin-bottom: 20px;
+  font-size: 1.3rem;
+}
+
+/* ===== Form Styling ===== */
+form {
+  width: 100%;
+  max-width: 500px;
+  display: flex;
+  gap: 10px;
+}
+
+input[type="text"] {
+  flex: 1;
+  padding: 12px 15px;
+  border: none;
+  border-radius: 10px;
+  outline: none;
+  font-size: 1rem;
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+input[type="text"]:focus {
+  border: 2px solid #667eea;
+}
+
+input[type="submit"] {
+  background: #667eea;
+  color: #fff;
+  padding: 12px 20px;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: background 0.3s ease;
+}
+
+input[type="submit"]:hover {
+  background: #5a67d8;
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 600px) {
+  ul.todoItems, form {
+    max-width: 90%;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
 }
-.completed{
-    color: gray;
-    text-decoration: line-through;
-}

public/js/main.js

@@ -2,71 +2,70 @@ const deleteBtn = document.querySelectorAll('.fa-trash')
 const item = document.querySelectorAll('.item span')
 const itemCompleted = document.querySelectorAll('.item span.completed')
 
-Array.from(deleteBtn).forEach((element)=>{
+Array.from(deleteBtn).forEach((element) => {
     element.addEventListener('click', deleteItem)
 })
 
-Array.from(item).forEach((element)=>{
+Array.from(item).forEach((element) => {
     element.addEventListener('click', markComplete)
 })
 
-Array.from(itemCompleted).forEach((element)=>{
+Array.from(itemCompleted).forEach((element) => {
     element.addEventListener('click', markUnComplete)
 })
 
-async function deleteItem(){
-    const itemText = this.parentNode.childNodes[1].innerText
-    try{
+// 🔹 Delete through ID instead of text
+async function deleteItem() {
+    const itemId = this.parentNode.dataset.id // Get ID from data-id attribute
+    try {
         const response = await fetch('deleteItem', {
             method: 'delete',
-            headers: {'Content-Type': 'application/json'},
+            headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({
-              'itemFromJS': itemText
+                id: itemId
             })
-          })
+        })
         const data = await response.json()
         console.log(data)
+        this.parentNode.remove()
         location.reload()
-
-    }catch(err){
+    } catch (err) {
         console.log(err)
     }
 }
 
-async function markComplete(){
+async function markComplete() {
     const itemText = this.parentNode.childNodes[1].innerText
-    try{
+    try {
         const response = await fetch('markComplete', {
             method: 'put',
-            headers: {'Content-Type': 'application/json'},
+            headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({
                 'itemFromJS': itemText
             })
-          })
+        })
         const data = await response.json()
         console.log(data)
         location.reload()
-
-    }catch(err){
+    } catch (err) {
         console.log(err)
     }
 }
 
-async function markUnComplete(){
+async function markUnComplete() {
     const itemText = this.parentNode.childNodes[1].innerText
-    try{
+    try {
         const response = await fetch('markUnComplete', {
             method: 'put',
-            headers: {'Content-Type': 'application/json'},
+            headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({
                 'itemFromJS': itemText
             })
-          })
+        })
         const data = await response.json()
         console.log(data)
         location.reload()
-
-    }catch(err){
+    } catch (err) {
         console.log(err)
     }
-}
+}

server.js

@@ -1,6 +1,6 @@
 const express = require('express')
 const app = express()
-const MongoClient = require('mongodb').MongoClient
+const { MongoClient, ObjectId } = require('mongodb')
 const PORT = 2121
 require('dotenv').config()
 
@@ -20,7 +20,6 @@ app.use(express.static('public'))
 app.use(express.urlencoded({ extended: true }))
 app.use(express.json())
 
-
 app.get('/',async (request, response)=>{
     const todoItems = await db.collection('todos').find().toArray()
     const itemsLeft = await db.collection('todos').countDocuments({completed: false})
@@ -78,8 +77,21 @@ app.put('/markUnComplete', (request, response) => {
 
 })
 
+
+// app.delete('/deleteItem', (request, response) => {
+//     db.collection('todos').deleteOne({thing: request.body.itemFromJS})
+//     .then(result => {
+//         console.log('Todo Deleted')
+//         response.json('Todo Deleted')
+//     })
+//     .catch(error => console.error(error))
+
+// })
+
 app.delete('/deleteItem', (request, response) => {
-    db.collection('todos').deleteOne({thing: request.body.itemFromJS})
+    db.collection('todos').deleteOne({_id: new ObjectId(request.body.id)},
+    { $set: { hidden: true } }
+    )
     .then(result => {
         console.log('Todo Deleted')
         response.json('Todo Deleted')

views/index.ejs

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!-- <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -8,15 +8,6 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
     <link rel="stylesheet" href="css/style.css">
 </head>
-<body>
-    <!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
 <body>
     <h1>Todo List: </h1>
     <ul class="todoItems">
@@ -42,6 +33,58 @@
     </form>
 
 
+    <script src='js/main.js'></script>
+</body>
+</html> -->
+
+
+<!-- ------------------ -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+   <h1>Todo List</h1>
+    <ul class="todoItems">
+    <% for (let i = 0; i < items.length; i++) { %>
+
+    <!-- Skip tasks that are soft-deleted (hidden: true) -->
+    <% if (!items[i].hidden) { %> 
+
+      <!-- Each todo item with a data-id attribute for JS actions -->
+      <li class="item" data-id="<%= items[i]._id %>">
+
+        <!-- If task is completed, add 'completed' class for styling -->
+        <% if (items[i].completed == true) { %>
+          <span class="completed"><%= items[i].thing %></span>
+        <% } else { %>
+          <!-- Otherwise, show normal task text -->
+          <span><%= items[i].thing %></span>
+        <% } %>
+
+        <!-- Trash icon for soft-delete; click handled in JS -->
+        <span class="fa fa-trash"></span>
+      </li>
+
+    <% } %>
+    <% } %>
+    </ul>
+
+   <h2>Left todo: <%= left %></h2>
+
+   <form action="/addTodo" method="POST">
+    <input type="text" placeholder="thing to do" name="todoItem">
+    <input type="submit" >
+   </form>
+
+
     <script src='js/main.js'></script>
 </body>
 </html>