100devs · prinsi-t · Aug 9, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/public/css/style.css b/public/css/style.css
@@ -1,6 +1,9 @@
+/* make h1 as a color red */
 h1{
     color: red;
 }
+
+/* giving it color gray and line-through decoration */
 .completed{
     color: gray;
     text-decoration: line-through;

diff --git a/public/js/main.js b/public/js/main.js
@@ -1,4 +1,6 @@
+//delete button
 const deleteBtn = document.querySelectorAll('.fa-trash')
+
 const item = document.querySelectorAll('.item span')
 const itemCompleted = document.querySelectorAll('.item span.completed')
 
@@ -14,6 +16,8 @@ Array.from(itemCompleted).forEach((element)=>{
     element.addEventListener('click', markUnComplete)
 })
 
+
+//an aynch function for deleting an item
 async function deleteItem(){
     const itemText = this.parentNode.childNodes[1].innerText
     try{

diff --git a/server.js b/server.js
@@ -1,29 +1,51 @@
+// To use the packages installed, we import 
+// them using require and
+//requiring express
 const express = require('express')
+
+// Initializing a constant to use express 
+// methods and create middlewares.
 const app = express()
+
+//connecting mongodb
 const MongoClient = require('mongodb').MongoClient
+
+//listening on port 2121
 const PORT = 2121
+
+//connecting .env file
 require('dotenv').config()
 
 
 let db,
     dbConnectionStr = process.env.DB_STRING,
     dbName = 'todo'
 
+    //connecting to mongodb
 MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true })
     .then(client => {
         console.log(`Connected to ${dbName} Database`)
         db = client.db(dbName)
     })
 
+
+// viewing engine has to be set to use ejs
 app.set('view engine', 'ejs')
+
+// Telling Nodejs that all our static 
+// files are stored in public folder
 app.use(express.static('public'))
+
+// Telling Node.js to use body-parser
 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})
+
+    // Render the file names index.ejs
     response.render('index.ejs', { items: todoItems, left: itemsLeft })
     // db.collection('todos').find().toArray()
     // .then(data => {
@@ -78,6 +100,8 @@ app.put('/markUnComplete', (request, response) => {
 
 })
 
+
+//deleting an item
 app.delete('/deleteItem', (request, response) => {
     db.collection('todos').deleteOne({thing: request.body.itemFromJS})
     .then(result => {
@@ -88,6 +112,8 @@ app.delete('/deleteItem', (request, response) => {
 
 })
 
+
+//app listening on port 
 app.listen(process.env.PORT || PORT, ()=>{
     console.log(`Server running on port ${PORT}`)
 })
diff --git a/views/index.ejs b/views/index.ejs
@@ -20,6 +20,9 @@
 <body>
     <h1>Todo List: </h1>
     <ul class="todoItems">
+
+         <!-- To avoid error, we simply use if-else, 
+            empty object is handled in if block -->
     <% for(let i=0; i < items.length; i++) {%>
         <li class="item">
             <% if(items[i].completed === true) {%>
@@ -35,6 +38,7 @@
     <h2>Left to do: <%= left %></h2>
 
     <h2>Add A Todo:</h2>
+
 
     <form action="/addTodo" method="POST">
         <input type="text" placeholder="Thing To Do" name="todoItem">