to my understanding i explain all action that been made.

public/js/main.js

@@ -1,19 +1,28 @@
+// declering a variable to all the element that as a "del" class
 const deleteBtn = document.querySelectorAll('.del')
+
+// declering a variable to all the element that as a parent class of ".todoItem" and parentChild reletionship of span element.
 const todoItem = document.querySelectorAll('.todoItem span')
+
+// declering a variable of all perent element of "class todoItems" and perent child relationship of span element with a class of "completed"
 const todoComplete = document.querySelectorAll('.todoItem span.completed')
 
+// from all variable element that as deleteBtn find the clicked one.
 Array.from(deleteBtn).forEach((el)=>{
     el.addEventListener('click', deleteTodo)
 })
 
+// from all variable element that as todoItem find the clicked one.
 Array.from(todoItem).forEach((el)=>{
     el.addEventListener('click', markComplete)
 })
 
+// from all variable element that as todoCompleted find the clicked one.
 Array.from(todoComplete).forEach((el)=>{
     el.addEventListener('click', undo)
 })
 
+// 
 async function deleteTodo(){
     const todoText = this.parentNode.childNodes[1].innerText
     try{

server.js

@@ -1,33 +1,47 @@
+// declearing a variable on express
 const express = require('express')
+// declearing a variable on app
 const app = express()
+// declearing a variable on MongoClient
 const MongoClient = require('mongodb').MongoClient
+// declearing a variable on port
 const PORT = 2121
+// declearing .env global variables
 require('dotenv').config()
 
+// declearing variables to connect into the dataBase
 let db,
     dbConnectionStr = process.env.DB_STRING,
     dbName = 'todo'
 
+// the DB connection 
 MongoClient.connect(dbConnectionStr, {useUnifiedTopology: true})
     .then(client => {
-        console.log(`Hey, connected to ${dbName} database`)
+        console.log(`Hey, connected to ${dbName} database`) 
         db = client.db(dbName)
     })
     .catch(err =>{
         console.log(err)
     })
 
+// setting UP ejs as view engine
 app.set('view engine', 'ejs')
+// setting up the free access to a dir called Public
 app.use(express.static('public'))
+// setting up the Language DB can understand when posting in a data into the DB
 app.use(express.urlencoded({ extended: true }))
+// setting up JSON connection to the DB
 app.use(express.json())
 
+
+// using get method to speak to the DB, and pull a home page request.
 app.get('/', async (req,res)=>{
     const todoItems = await db.collection('todos').find().toArray()
     const itemsLeft = await db.collection('todos').countDocuments({completed: false})
     res.render('index.ejs', {zebra: todoItems, left: itemsLeft})
 })
 
+// using post method to add a new todoDocument into the todosCollection on the DB
 app.post('/createTodo', (req, res)=>{
     db.collection('todos').insertOne({todo: req.body.todoItem, completed: false})
     .then(result =>{
@@ -36,6 +50,7 @@ app.post('/createTodo', (req, res)=>{
     })
 })
 
+// using put method to updateOne of the document inside the todo collection from FALSE to TRUE
 app.put('/markComplete', (req, res)=>{
     db.collection('todos').updateOne({todo: req.body.rainbowUnicorn},{
         $set: {
@@ -48,6 +63,7 @@ app.put('/markComplete', (req, res)=>{
     })
 })
 
+// using put method to updateOne of the document in the todo collection from TRUE to FALSE
 app.put('/undo', (req, res)=>{
     db.collection('todos').updateOne({todo: req.body.rainbowUnicorn},{
         $set: {
@@ -60,6 +76,7 @@ app.put('/undo', (req, res)=>{
     })
 })
 
+// using delete method to deleteOne of the document inside the todos collection
 app.delete('/deleteTodo', (req, res)=>{
     db.collection('todos').deleteOne({todo:req.body.rainbowUnicorn})
     .then(result =>{
@@ -69,6 +86,7 @@ app.delete('/deleteTodo', (req, res)=>{
     .catch( err => console.log(err))
 })
 
+// app.listen is where the todos is hosted on
 app.listen(process.env.PORT || PORT, ()=>{
     console.log('Server is running, you better catch it!')
 })    

views/index.ejs

@@ -7,8 +7,12 @@
     <title>Document</title>
     <link rel="stylesheet" href="css/style.css">
 </head>
+
+<!-- this is what the server view on the user interface as the response on your get request which they are -->
 <body>
+    <!-- h1, heading element -->
     <h1>Todos</h1>
+    <!-- list of the items inside the todosCollection -->
     <ul>
     <% for(let i = 0; i < zebra.length; i++) { %>
         <li class='todoItem'>
@@ -24,6 +28,7 @@
 
     <h2>Things left to do: <%= left %></h2>
 
+    <!-- the form that send its post request to the server. -->
     <form action="/createTodo" method='POST'>
         <input type="text" placeholder="Enter Todo Item" name='todoItem'>
         <input type="submit">