Added comments on server.js, main.js and index.ejs

.vscode/settings.json

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

public/js/main.js

@@ -1,72 +1,72 @@
-const deleteBtn = document.querySelectorAll('.fa-trash')
-const item = document.querySelectorAll('.item span')
-const itemCompleted = document.querySelectorAll('.item span.completed')
+const deleteBtn = document.querySelectorAll('.fa-trash') //creates a deleteBtn variable and sets it all buttons with the class .fa-trash button
+const item = document.querySelectorAll('.item span') //creates a item variable and sets it to all span with the class .item span
+const itemCompleted = document.querySelectorAll('.item span.completed') //creates a itemCompleted variable and sets it to all span with the class .completed span
 
-Array.from(deleteBtn).forEach((element)=>{
-    element.addEventListener('click', deleteItem)
+Array.from(deleteBtn).forEach((element)=>{ //creates an array of deleteBtn and loops through each button
+    element.addEventListener('click', deleteItem) //adds an EventListener to each deleteBtn
 })
 
-Array.from(item).forEach((element)=>{
-    element.addEventListener('click', markComplete)
+Array.from(item).forEach((element)=>{ //creates an array of item and loops through each item
+    element.addEventListener('click', markComplete) //adds an EventListener to each item
 })
 
-Array.from(itemCompleted).forEach((element)=>{
-    element.addEventListener('click', markUnComplete)
+Array.from(itemCompleted).forEach((element)=>{ //creates an array of itemCompleted and loops through each itemCompleted
+    element.addEventListener('click', markUnComplete) //adds an EventListener to each item
 })
 
-async function deleteItem(){
-    const itemText = this.parentNode.childNodes[1].innerText
+async function deleteItem(){ //deletes an item
+    const itemText = this.parentNode.childNodes[1].innerText //creates a itemText and sets it equal to the span text 
     try{
-        const response = await fetch('deleteItem', {
-            method: 'delete',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({
-              'itemFromJS': itemText
+        const response = await fetch('deleteItem', { //creates a variable function a waits for the server to get the data with a fetch request
+            method: 'delete', //calls the delete methed to delete a item
+            headers: {'Content-Type': 'application/json'}, //tells what type of content we're sending
+            body: JSON.stringify({ //covents the JS object to JSON string data
+              'itemFromJS': itemText //sends the itemText that contains text to the server side
             })
           })
-        const data = await response.json()
-        console.log(data)
-        location.reload()
+        const data = await response.json() //a data variable to get the response json that todo item is deleted
+        console.log(data) //console log the data that it got from the delete method
+        location.reload() //reload the page
 
     }catch(err){
-        console.log(err)
+        console.log(err) //notify an error if delete method fail
     }
 }
 
-async function markComplete(){
-    const itemText = this.parentNode.childNodes[1].innerText
+async function markComplete(){ //set the todo item to true to mark task as complete
+    const itemText = this.parentNode.childNodes[1].innerText //creats a variable and sets it equal to span text
     try{
-        const response = await fetch('markComplete', {
-            method: 'put',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({
-                'itemFromJS': itemText
+        const response = await fetch('markComplete', { //creates a variable function a waits for the server to get the data with a fetch request
+            method: 'put', //calls a put request to update todo item
+            headers: {'Content-Type': 'application/json'}, //tell what type of content we're sending
+            body: JSON.stringify({ //covents the JS object to JSON string data
+                'itemFromJS': itemText //sends the itemText that contains text to the server side
             })
           })
-        const data = await response.json()
-        console.log(data)
-        location.reload()
+        const data = await response.json() //a data variable to get the response json that todo item is updated to true
+        console.log(data) //console log the data that it got from the put method
+        location.reload() //reload the page
 
     }catch(err){
-        console.log(err)
+        console.log(err) //notify error if method fail
     }
 }
 
-async function markUnComplete(){
-    const itemText = this.parentNode.childNodes[1].innerText
+async function markUnComplete(){ //change the status todo item to false as uncomplete
+    const itemText = this.parentNode.childNodes[1].innerText //creates a variable and sets it equal to span text
     try{
-        const response = await fetch('markUnComplete', {
-            method: 'put',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({
-                'itemFromJS': itemText
+        const response = await fetch('markUnComplete', { //creates a variable function a waits for the server to get the data with a fetch request
+            method: 'put', //calls a put request to update todo item
+            headers: {'Content-Type': 'application/json'}, //tells what type of data we're sending
+            body: JSON.stringify({ //covents the JS object to JSON string data
+                'itemFromJS': itemText //sends the itemText that contains text to the server side
             })
           })
-        const data = await response.json()
-        console.log(data)
-        location.reload()
+        const data = await response.json() //a data variable to get the response json that todo item is updated to false
+        console.log(data) //console log the data that it got from the put method
+        location.reload() //reload the page
 
     }catch(err){
-        console.log(err)
+        console.log(err) //notify an error if method fail
     }
 }

server.js

@@ -1,30 +1,30 @@
-const express = require('express')
-const app = express()
-const MongoClient = require('mongodb').MongoClient
-const PORT = 2121
-require('dotenv').config()
+const express = require('express') //imports express in node.js
+const app = express() //calls the express to create an app for application
+const MongoClient = require('mongodb').MongoClient //imports mongodb in node.js
+const PORT = 2121 //sets up port number for app to listen
+require('dotenv').config() // command that loads environment variables from .env file into process.env. separate the sensitive data from code and stored them securely outside the source code
 
 
-let db,
-    dbConnectionStr = process.env.DB_STRING,
-    dbName = 'todo'
+let db, //sets up a database variable
+    dbConnectionStr = process.env.DB_STRING, //create a varialbe and set to database key from mongodb
+    dbName = 'todo' //created database name and set it to 'todo'
 
-MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true })
+MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true }) //connects tha database to mongodb 
     .then(client => {
-        console.log(`Connected to ${dbName} Database`)
-        db = client.db(dbName)
+        console.log(`Connected to ${dbName} Database`) //tells user that 'todo' is connected to the database
+        db = client.db(dbName) //sets db to hold the collection of todos
     })
 
-app.set('view engine', 'ejs')
-app.use(express.static('public'))
-app.use(express.urlencoded({ extended: true }))
-app.use(express.json())
+app.set('view engine', 'ejs') //sets ejs as templet language
+app.use(express.static('public')) //connects to public folder and loads all the files that are inside 
+app.use(express.urlencoded({ extended: true }))//secure data code 
+app.use(express.json()) //goes to the data and gets the body text and convert it to JS object
 
 
-app.get('/',async (request, response)=>{
-    const todoItems = await db.collection('todos').find().toArray()
-    const itemsLeft = await db.collection('todos').countDocuments({completed: false})
-    response.render('index.ejs', { items: todoItems, left: itemsLeft })
+app.get('/',async (request, response)=>{ //gets the path that is requesting
+    const todoItems = await db.collection('todos').find().toArray() //Goes to the todos database, goes inside the collection, grabs all the documents and put them an a array
+    const itemsLeft = await db.collection('todos').countDocuments({completed: false}) //Goes to the todos database, goes inside the collection, and counts all the documents that has completed set in false
+    response.render('index.ejs', { items: todoItems, left: itemsLeft }) //data is put in the ejs templete and response them with ejs
     // db.collection('todos').find().toArray()
     // .then(data => {
     //     db.collection('todos').countDocuments({completed: false})
@@ -35,59 +35,59 @@ app.get('/',async (request, response)=>{
     // .catch(error => console.error(error))
 })
 
-app.post('/addTodo', (request, response) => {
-    db.collection('todos').insertOne({thing: request.body.todoItem, completed: false})
+app.post('/addTodo', (request, response) => { //goes to the form that has the action of addTodo and gets the text that contains item and add it to the todos database
+    db.collection('todos').insertOne({thing: request.body.todoItem, completed: false}) //Goes to the todos database, goes inside the collection and adds a new todo item to the collection and set completed to false
     .then(result => {
-        console.log('Todo Added')
-        response.redirect('/')
+        console.log('Todo Added') //lets user know that a new todo item is added to the database
+        response.redirect('/') //Let user know that it went okay and reloads the page and makes a get request that grabs all the todo items including the new one that was just added
     })
-    .catch(error => console.error(error))
+    .catch(error => console.error(error)) //notify an error if fail to procces a post request
 })
 
-app.put('/markComplete', (request, response) => {
-    db.collection('todos').updateOne({thing: request.body.itemFromJS},{
+app.put('/markComplete', (request, response) => { //updates an existing todo item 
+    db.collection('todos').updateOne({thing: request.body.itemFromJS},{ //Goes to the todos database, goes inside the collection and updates the todo item that is looking for
         $set: {
-            completed: true
+            completed: true //set completed from false to true
           }
     },{
-        sort: {_id: -1},
-        upsert: false
+        sort: {_id: -1}, //sorts the todo items from top to bottom and finds the first item its looking for and update it
+        upsert: false //does not create a new todo item if item does not exist
     })
     .then(result => {
-        console.log('Marked Complete')
-        response.json('Marked Complete')
+        console.log('Marked Complete') //let user know that update has been complete
+        response.json('Marked Complete') //response that everything went okay and todo item is completed
     })
-    .catch(error => console.error(error))
+    .catch(error => console.error(error)) //notify an error if fail to update
 
 })
 
-app.put('/markUnComplete', (request, response) => {
-    db.collection('todos').updateOne({thing: request.body.itemFromJS},{
+app.put('/markUnComplete', (request, response) => { //updates an existing todo item
+    db.collection('todos').updateOne({thing: request.body.itemFromJS},{ //Goes to the todos database, goes inside the collection and updates the todo item that is looking for
         $set: {
-            completed: false
+            completed: false //update the status completed from true to false
           }
     },{
-        sort: {_id: -1},
-        upsert: false
+        sort: {_id: -1}, //sorts the todo items from top to bottom and finds the first item its looking for and update it
+        upsert: false //does not create a new todo item if item does not exist
     })
     .then(result => {
-        console.log('Marked Complete')
-        response.json('Marked Complete')
+        console.log('Marked Complete') //let user know that update is complete
+        response.json('Marked Complete') //response user that it went okay and updates the todo item
     })
-    .catch(error => console.error(error))
+    .catch(error => console.error(error)) //notify if an error occur if fail to update
 
 })
 
-app.delete('/deleteItem', (request, response) => {
-    db.collection('todos').deleteOne({thing: request.body.itemFromJS})
+app.delete('/deleteItem', (request, response) => { //deletes a todo item
+    db.collection('todos').deleteOne({thing: request.body.itemFromJS}) //Goes to the todos database, goes inside the collection and deletes the item that is looking for
     .then(result => {
-        console.log('Todo Deleted')
-        response.json('Todo Deleted')
+        console.log('Todo Deleted') //let user know that the todo item is deleted
+        response.json('Todo Deleted') //response user that it went okay and deletes the todo item
     })
-    .catch(error => console.error(error))
+    .catch(error => console.error(error)) //notify if an error occur if fail to delete
 
 })
 
-app.listen(process.env.PORT || PORT, ()=>{
-    console.log(`Server running on port ${PORT}`)
+app.listen(process.env.PORT || PORT, ()=>{ //listen for the PORT number to run the server
+    console.log(`Server running on port ${PORT}`) //let user know server is up and running
 })

views/index.ejs

@@ -20,12 +20,12 @@
 <body>
     <h1>Todo List: </h1>
     <ul class="todoItems">
-    <% for(let i=0; i < items.length; i++) {%>
+    <% for(let i=0; i < items.length; i++) {%> <!--loops througth the todo database-->
         <li class="item">
-            <% if(items[i].completed === true) {%>
-                <span class='completed'><%= items[i].thing %></span>
-            <% }else{ %>
-                <span><%= items[i].thing %></span>
+            <% if(items[i].completed === true) {%> <!--checks if todo item is completed-->
+                <span class='completed'><%= items[i].thing %></span> <!--creates a span element with the class completed and display todo item-->
+            <% }else{ %> <!--run the default code-->
+                <span><%= items[i].thing %></span> <!--creates a span element with no class and display todo item-->
             <% } %>    
             <span class='fa fa-trash'></span>
         </li>