Commented Lines for Homework

.vscode/settings.json

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

public/css/style.css

@@ -1,7 +1,7 @@
-h1{
-    color: red;
-}
-.completed{
-    color: gray;
-    text-decoration: line-through;
-}
+h1{ /*selecting the h1 element in the EJS file*/
+    color: red; /*sets the text colour of the h1 to red */
+} /*closing the selector*/
+.completed{ /*selecting any element with the completed class*/
+    color: gray; /*sets the text colour to gray*/
+    text-decoration: line-through; /*applies a strike through styling to the text*/
+} /*closing the selector*/

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') //creating a constant variable and assigning it to a selection to all elements with the class 'fa-trash'
+const item = document.querySelectorAll('.item span') //creating a constant variable and assigning it to all span tags within a parent with the class of 'item'
+const itemCompleted = document.querySelectorAll('.item span.completed') //creating a constant variable and assiging it to all span tags with the 'completed' class, that are within a parent with the class of 'item'
 
-Array.from(deleteBtn).forEach((element)=>{
-    element.addEventListener('click', deleteItem)
-})
+Array.from(deleteBtn).forEach((element)=>{ //creating an array from our selection and starting a loop
+    element.addEventListener('click', deleteItem) //adding an event listener on the current item, and on a 'click' calls a function called deleteItem
+}) //close our loop
 
-Array.from(item).forEach((element)=>{
-    element.addEventListener('click', markComplete)
-})
+Array.from(item).forEach((element)=>{ //creating an array from our selection and starting a loop
+    element.addEventListener('click', markComplete) //adding an event listener on the current item, and on a 'click' calls a function called markComplete
+}) //close our loop
 
-Array.from(itemCompleted).forEach((element)=>{
-    element.addEventListener('click', markUnComplete)
-})
+Array.from(itemCompleted).forEach((element)=>{ //creating an array from our selection and starting a loop
+    element.addEventListener('click', markUnComplete) //adding an event listener on the current item, and on a 'click' calls a function called markUnComplete
+}) //close our loop
 
-async function deleteItem(){
-    const itemText = this.parentNode.childNodes[1].innerText
-    try{
-        const response = await fetch('deleteItem', {
-            method: 'delete',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({
-              'itemFromJS': itemText
-            })
-          })
-        const data = await response.json()
-        console.log(data)
-        location.reload()
+async function deleteItem(){ //declare an asynchronous function
+    const itemText = this.parentNode.childNodes[1].innerText //looks inside the list item and grabs only the inner text within the list span
+    try{ //starting a try block to do something
+        const response = await fetch('deleteItem', { //creates a response variable that waits on a fetch to retrieve data from the result of deleteItem route
+            method: 'delete', //sets the CRUD method for the route
+            headers: {'Content-Type': 'application/json'}, //specifiying the type of content expected, which is JSON
+            body: JSON.stringify({ //declare the message content being passed, and stringiy that content
+              'itemFromJS': itemText //setting the content of the body to the inner text of the list item and naming it 'itemFromJS'
+            }) //closing the body
+          }) // closing the object
+        const data = await response.json() //waiting on JSON from the response to be converted
+        console.log(data) //log the data to the console
+        location.reload() //reloads the page to update what is displayed
 
-    }catch(err){
-        console.log(err)
-    }
-}
+    }catch(err){ //if an error occurs pass the error into the catch block
+        console.log(err) //log the error 
+    } //close the catch block
+} //ends the function
 
-async function markComplete(){
-    const itemText = this.parentNode.childNodes[1].innerText
-    try{
-        const response = await fetch('markComplete', {
-            method: 'put',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({
-                'itemFromJS': itemText
-            })
-          })
-        const data = await response.json()
-        console.log(data)
-        location.reload()
+async function markComplete(){ //declare an asynchronous function
+    const itemText = this.parentNode.childNodes[1].innerText //looks inside of the list item and grabs only the inner text within the list span
+    try{ //starting a try block to do something
+        const response = await fetch('markComplete', { //creates a response variable that waits on a fetch to get data from the result of the markComplete route
+            method: 'put', //setting the CRUD method to "upsdate" for the route
+            headers: {'Content-Type': 'application/json'}, //specifying the type of content expected which is JSON
+            body: JSON.stringify({ //declare the message content being passed, and stringify that content
+                'itemFromJS': itemText //setting the content of the body to the inner text of the list item and naming it 'itemFromJS'
+            }) //closing the body
+          }) //closing the object
+        const data = await response.json() //waiting on JSON from the response to be converted
+        console.log(data) //log the data to the console
+        location.reload() //reloads the page to update what is displayed
 
-    }catch(err){
-        console.log(err)
-    }
-}
+    }catch(err){ //if an error occurs pass the error into the catch block
+        console.log(err) //log the error to the console
+    } //close the catch block
+} //ends the function
 
-async function markUnComplete(){
-    const itemText = this.parentNode.childNodes[1].innerText
-    try{
-        const response = await fetch('markUnComplete', {
-            method: 'put',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({
-                'itemFromJS': itemText
-            })
-          })
-        const data = await response.json()
-        console.log(data)
-        location.reload()
+async function markUnComplete(){ //declare an asynchronous function
+    const itemText = this.parentNode.childNodes[1].innerText //looks inside of the list item and grabs only the inner text within the list span
+    try{ //starting a try block to do something
+        const response = await fetch('markUnComplete', {  //creates a response variable that waits on a fetch to get data from the result of the markUnComplete route
+            method: 'put', //setting the CRUD method to "upsdate" for the route
+            headers: {'Content-Type': 'application/json'}, //specifying the type of content expected which is JSON
+            body: JSON.stringify({ //declare the message content being passed, and stringify that content
+                'itemFromJS': itemText //setting the content of the body to the inner text of the list item and naming it 'itemFromJS'
+            }) //closing the body
+          }) //closing the object
+        const data = await response.json() //waiting on JSON from the response to be converted
+        console.log(data) 
+        location.reload() //reloads the page to update what is displayed
 
-    }catch(err){
-        console.log(err)
-    }
-}
+    }catch(err){ //if an error occurs pass the error into the catch block
+        console.log(err) //log the error to the console
+    } //close the catch block
+} //ends the function

server.js

@@ -1,30 +1,31 @@
-const express = require('express')
-const app = express()
-const MongoClient = require('mongodb').MongoClient
-const PORT = 2121
-require('dotenv').config()
+const express = require('express') //makes it possible to use express in this file
+const app = express() //setting constant and assigning it to  the instance of express
+const MongoClient = require('mongodb').MongoClient //makes it possible to use methods associated with MongoClient and talk to our DB
+const PORT = 2121 //setting a constant to determine the location where our server will be listening
+require('dotenv').config() //allows us to look for variables inside of the .env file
 
 
-let db,
-    dbConnectionStr = process.env.DB_STRING,
-    dbName = 'todo'
+let db, //declaring a variable called db but not assigning a value
+    dbConnectionStr = process.env.DB_STRING, //declaring a variable and assigning it our database connection string
+    dbName = 'todo' //declaring a variable and assigning it the name of the database we will be using
 
-MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true })
-    .then(client => {
-        console.log(`Connected to ${dbName} Database`)
-        db = client.db(dbName)
-    })
+MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true }) //creating a connection to MongoDb and passing in our connection string. Alsom passing in an additional property
+    .then(client => { //waiting for the connection to the DB and proceeding if successful, also passing in all the client info
+        console.log(`Connected to ${dbName} Database`) //logging a template literal that we are to the console that we are connected to our database
+        db = client.db(dbName) //assigning a value to a previously declared db variable that contains a db client factory method
+    }) //closing our .then
 
-app.set('view engine', 'ejs')
-app.use(express.static('public'))
-app.use(express.urlencoded({ extended: true }))
-app.use(express.json())
+//middleware
+app.set('view engine', 'ejs') //setting ejs as the default render
+app.use(express.static('public')) //sets the location for static assets
+app.use(express.urlencoded({ extended: true })) //tells express to decode and encode URLs where the header matches the content. Supports arrays and objects
+app.use(express.json()) //parses JSON content
 
 
-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)=>{ //starts a GET method when the root route is passed in, sets up req and res parameters
+    const todoItems = await db.collection('todos').find().toArray() //sets a variable and awaits all items from the todos collection
+    const itemsLeft = await db.collection('todos').countDocuments({completed: false}) //sets a variable and awaits a count of documents where the completed property is false
+    response.render('index.ejs', { items: todoItems, left: itemsLeft }) //redering the EJS file and passing through the db items and the count remaining inside of an object
     // db.collection('todos').find().toArray()
     // .then(data => {
     //     db.collection('todos').countDocuments({completed: false})
@@ -35,59 +36,57 @@ 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})
-    .then(result => {
-        console.log('Todo Added')
-        response.redirect('/')
-    })
-    .catch(error => console.error(error))
-})
+app.post('/addTodo', (request, response) => { //starts a POST method when the /addTodo route is passed in 
+    db.collection('todos').insertOne({thing: request.body.todoItem, completed: false}) //inserts a new item into the todos collection, giving it a completed value of false by default
+    .then(result => { //if insert is successful, do something
+        console.log('Todo Added') //log "Todo Added" to the console
+        response.redirect('/') //redirect from /addTodo back to the root route to refresh the page
+    }) //closing the .then
+    .catch(error => console.error(error)) //catching errors
+}) //ending the POST request
 
-app.put('/markComplete', (request, response) => {
-    db.collection('todos').updateOne({thing: request.body.itemFromJS},{
-        $set: {
-            completed: true
+app.put('/markComplete', (request, response) => { //starting a PUT method when the markComplete route is passed in
+    db.collection('todos').updateOne({thing: request.body.itemFromJS},{ //look in the db for one item matching the name of the item passed in from the main.js file that was clicked
+        $set: { 
+            completed: true //setting the completed status to true
           }
     },{
-        sort: {_id: -1},
-        upsert: false
-    })
-    .then(result => {
-        console.log('Marked Complete')
-        response.json('Marked Complete')
+        sort: {_id: -1}, //moves item to the bottom of the list
+        upsert: false //prevents insertion if the item does not already exist
     })
-    .catch(error => console.error(error))
-
+    .then(result => { //starting a .then if the update was successful
+        console.log('Marked Complete') //logging successful completion
+        response.json('Marked Complete') //sending a response back to the sender
+    }) //closing the .then
+    .catch(error => console.error(error)) //catching errors
 })
 
-app.put('/markUnComplete', (request, response) => {
-    db.collection('todos').updateOne({thing: request.body.itemFromJS},{
-        $set: {
-            completed: false
+app.put('/markUnComplete', (request, response) => { //starting a PUT method when the markUnComplete route is passed in
+    db.collection('todos').updateOne({thing: request.body.itemFromJS},{ //look in the db for one item matching the name of the item passed in from the main.js file that was clicked
+        $set: { 
+            completed: false //setting the completed status to false
           }
     },{
-        sort: {_id: -1},
-        upsert: false
-    })
-    .then(result => {
-        console.log('Marked Complete')
-        response.json('Marked Complete')
+        sort: {_id: -1}, //moves item to the bottom of the list
+        upsert: false //prevents insertion if the item does not already exist
     })
-    .catch(error => console.error(error))
-
+    .then(result => { //starting a .then if the update was successful
+        console.log('Marked Complete') //logging successful completion
+        response.json('Marked Complete') //sending a response back to the sender
+    }) //closing the .then
+    .catch(error => console.error(error)) //catching errors
 })
 
-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) => { //starting a DELETE method when the delete route is passed
+    db.collection('todos').deleteOne({thing: request.body.itemFromJS}) //look in the db for one item matching the name of the item passed and deleting it
+    .then(result => { //starting a .then if the delete was successful
+        console.log('Todo Deleted') //logging successful completion
+        response.json('Todo Deleted') //sending a response back to the sender
+    }) // closing the .then
+    .catch(error => console.error(error)) //catching errors
 
 })
 
-app.listen(process.env.PORT || PORT, ()=>{
-    console.log(`Server running on port ${PORT}`)
-})
+app.listen(process.env.PORT || PORT, ()=>{ //setting up which port we will be listening on - either the port from the .env file or the port variable
+    console.log(`Server running on port ${PORT}`) //logging the running port
+}) //end ths listen method