Class 44 code annotations

.vscode/settings.json

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

public/js/main.js

@@ -2,11 +2,11 @@ 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)=>{// every selector that has a delete a trash button instantiated create an array and then for each element aka the trash can a individual click event is created
     element.addEventListener('click', deleteItem)
 })
 
-Array.from(item).forEach((element)=>{
+Array.from(item).forEach((element)=>{// any span that was instantiated in the parent item class--> run through those and add a event listener
     element.addEventListener('click', markComplete)
 })
 
@@ -15,13 +15,13 @@ Array.from(itemCompleted).forEach((element)=>{
 })
 
 async function deleteItem(){
-    const itemText = this.parentNode.childNodes[1].innerText
+    const itemText = this.parentNode.childNodes[1].innerText //got to the parent of this this trash can to select the name of 
     try{
-        const response = await fetch('deleteItem', {
+        const response = await fetch('deleteItem', { // go to the server js and send this information to the request, and when it comes back reload
             method: 'delete',
             headers: {'Content-Type': 'application/json'},
             body: JSON.stringify({
-              'itemFromJS': itemText
+              'itemFromJS': itemText // add item text to the request body from api send back itemFrom Js and the property of the request
             })
           })
         const data = await response.json()
@@ -33,27 +33,27 @@ async function deleteItem(){
     }
 }
 
-async function markComplete(){
-    const itemText = this.parentNode.childNodes[1].innerText
+async function markComplete(){//click event linked to clicking a list item completed=false
+    const itemText = this.parentNode.childNodes[1].innerText//defines the content of what is being click aka the words in the list item
     try{
-        const response = await fetch('markComplete', {
-            method: 'put',
+        const response = await fetch('markComplete', {//api to servside.Js prop to change the completed from false to true
+            method: 'put',//defining the types of mod is being made
             headers: {'Content-Type': 'application/json'},
             body: JSON.stringify({
-                'itemFromJS': itemText
+                'itemFromJS': itemText//adding this property item from JS to the request body
             })
           })
         const data = await response.json()
         console.log(data)
-        location.reload()
+        location.reload()// initiating a get request
 
     }catch(err){
         console.log(err)
     }
 }
 
 async function markUnComplete(){
-    const itemText = this.parentNode.childNodes[1].innerText
+    const itemText = this.parentNode.childNodes[1].innerText// doing the same as above but only for items whose completed value is set to true
     try{
         const response = await fetch('markUnComplete', {
             method: 'put',

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') //creating the connection express app
+const app = express() //storing the object/properties and methods of express into app to just when using methods
+const MongoClient = require('mongodb').MongoClient //connection for application to mongoDB
+const PORT = 2121 //setting up the port for local hosting as a variable
+require('dotenv').config() //needed for the env file connection
 
 
-let db,
+let db, //instaitating  variable db(unkown), dbstring as variable to be found in env file, and dbName to console where what DB is being used
     dbConnectionStr = process.env.DB_STRING,
     dbName = 'todo'
 
-MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true })
+MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true }) //string to connect Mongodb specifically to corrent database
     .then(client => {
         console.log(`Connected to ${dbName} Database`)
-        db = client.db(dbName)
+        db = client.db(dbName) //redefining db and with the client.dbmethod
     })
 
-app.set('view engine', 'ejs')
-app.use(express.static('public'))
+app.set('view engine', 'ejs') //setting ejs as the template language thae is being used
+app.use(express.static('public'))//letting express know that the static files are in the public folder in relation to the root
 app.use(express.urlencoded({ extended: true }))
-app.use(express.json())
+app.use(express.json()) //converting the objects used in express to Json
 
 
-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)=>{ //creating the root of the page using async infront of second param
+    const todoItems = await db.collection('todos').find().toArray() //go to DB and go to collections then conver the collection of object into an array-store in variable itemas
+    const itemsLeft = await db.collection('todos').countDocuments({completed: false}) //store the amount of object in todo as items left variable 
+    response.render('index.ejs', { items: todoItems, left: itemsLeft }) //after you get all this info send it over to ejs to use to render html
     // db.collection('todos').find().toArray()
     // .then(data => {
     //     db.collection('todos').countDocuments({completed: false})
@@ -35,33 +35,34 @@ 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) => {//the creation of new content 
+    db.collection('todos').insertOne({thing: request.body.todoItem, completed: false}) //telling the db what objects/properties to add to the DB
     .then(result => {
         console.log('Todo Added')
-        response.redirect('/')
+        response.redirect('/') //queing the get request to update page with new db information
     })
     .catch(error => console.error(error))
 })
 
-app.put('/markComplete', (request, response) => {
-    db.collection('todos').updateOne({thing: request.body.itemFromJS},{
+app.put('/markComplete', (request, response) => { // the update request
+    db.collection('todos').updateOne({thing: request.body.itemFromJS},{ //telling the db what to update-int this case the 
+        //maybe find the "thing" that matches name itemFromJs from client side js put which reflects the item that was clicked in the dom 
         $set: {
-            completed: true
+            completed: true //js is sending info to server side to say hey this is completed then updating in db
           }
     },{
-        sort: {_id: -1},
-        upsert: false
+        sort: {_id: -1},//sorting it in reverse order
+        upsert: false //this means you do not want object to be instatiated if it not already apart od the DB
     })
     .then(result => {
         console.log('Marked Complete')
-        response.json('Marked Complete')
+        response.json('Marked Complete')//sending to JS to notify it is completed--> leading to the location reload
     })
     .catch(error => console.error(error))
 
 })
 
-app.put('/markUnComplete', (request, response) => {
+app.put('/markUnComplete', (request, response) => {//same as above but only for objects who were thing property is set true 
     db.collection('todos').updateOne({thing: request.body.itemFromJS},{
         $set: {
             completed: false
@@ -78,8 +79,8 @@ app.put('/markUnComplete', (request, response) => {
 
 })
 
-app.delete('/deleteItem', (request, response) => {
-    db.collection('todos').deleteOne({thing: request.body.itemFromJS})
+app.delete('/deleteItem', (request, response) => { //deleting the object from the db- clientside js
+    db.collection('todos').deleteOne({thing: request.body.itemFromJS})// the item from js isn the variable stored in the clientside js during the click event
     .then(result => {
         console.log('Todo Deleted')
         response.json('Todo Deleted')
@@ -88,6 +89,6 @@ app.delete('/deleteItem', (request, response) => {
 
 })
 
-app.listen(process.env.PORT || PORT, ()=>{
+app.listen(process.env.PORT || PORT, ()=>{ //use the port provided by the hosting site if not then use the port stored in the variable object
     console.log(`Server running on port ${PORT}`)
 })

views/index.ejs

@@ -19,9 +19,11 @@
 </head>
 <body>
     <h1>Todo List: </h1>
-    <ul class="todoItems">
+    <ul class="todoItems"> 
+        <!-- EJS for loop to loop through the Mondgo DB array and standardize what sametic info will be in each li reflecting the properties the object  -->
     <% for(let i=0; i < items.length; i++) {%>
         <li class="item">
+            <!-- conditional language that will include different classes based on the item.complete value that will dictate what the design of that li will be -->
             <% if(items[i].completed === true) {%>
                 <span class='completed'><%= items[i].thing %></span>
             <% }else{ %>
@@ -35,7 +37,7 @@
     <h2>Left to do: <%= left %></h2>
 
     <h2>Add A Todo:</h2>
-
+<!-- form that includes that route and post method to link the form to the create request in severside JS -->
     <form action="/addTodo" method="POST">
         <input type="text" placeholder="Thing To Do" name="todoItem">
         <input type="submit">