Comments for Class 44 Homework

.vscode/settings.json

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

public/css/style.css

@@ -1,7 +1,13 @@
-h1{
-    color: red;
+/* targets h1 */
+h1{ 
+    /* colors h1 red  */
+    color: red; 
 }
-.completed{
-    color: gray;
-    text-decoration: line-through;
+
+/* targets completed class */
+.completed{ 
+    /* colors it gray */
+    color: gray; 
+    /* strikes through */
+    text-decoration: line-through; 
 }

public/js/main.js

@@ -1,72 +1,73 @@
-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') // targets all icons with trash
+const item = document.querySelectorAll('.item span') // targets all spans with class item
+const itemCompleted = document.querySelectorAll('.item span.completed') // targets same as above but with completed class
 
-Array.from(deleteBtn).forEach((element)=>{
+Array.from(deleteBtn).forEach((element)=>{ //calls deleteItem when deleteBtn is clicked
     element.addEventListener('click', deleteItem)
 })
 
-Array.from(item).forEach((element)=>{
+Array.from(item).forEach((element)=>{ // calls markComplete when clicked
     element.addEventListener('click', markComplete)
 })
 
-Array.from(itemCompleted).forEach((element)=>{
+Array.from(itemCompleted).forEach((element)=>{ //calls markUnComplete when item is completed and marks it incomplete
     element.addEventListener('click', markUnComplete)
 })
 
-async function deleteItem(){
-    const itemText = this.parentNode.childNodes[1].innerText
+async function deleteItem(){ // async calls deleteItem
+    const itemText = this.parentNode.childNodes[1].innerText // item's childNode's innerText
     try{
-        const response = await fetch('deleteItem', {
-            method: 'delete',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({
-              'itemFromJS': itemText
+        const response = await fetch('deleteItem', { // calls fetch to delete item
+            method: 'delete', // tells method
+            headers: {'Content-Type': 'application/json'}, // using json
+            body: JSON.stringify({ 
+              'itemFromJS': itemText//tells which item to delete (itemText)
             })
           })
-        const data = await response.json()
-        console.log(data)
-        location.reload()
+        const data = await response.json() // awaits response
+        console.log(data) // consoles data
+        location.reload() // reloads page
 
-    }catch(err){
+    }catch(err){ // throws error if caught
         console.log(err)
     }
 }
 
-async function markComplete(){
-    const itemText = this.parentNode.childNodes[1].innerText
+async function markComplete(){ // async function to mark complete
+    const itemText = this.parentNode.childNodes[1].innerText // item's childNode's innerText
     try{
-        const response = await fetch('markComplete', {
-            method: 'put',
-            headers: {'Content-Type': 'application/json'},
+        const response = await fetch('markComplete', { // calls fetch to mark complete
+            method: 'put', //uses put method
+            headers: {'Content-Type': 'application/json'},  // using json
             body: JSON.stringify({
-                'itemFromJS': itemText
+                'itemFromJS': itemText //tells which item to update (itemText)
             })
           })
-        const data = await response.json()
-        console.log(data)
-        location.reload()
+        const data = await response.json() // awaits response
+        console.log(data) // consoles data
+        location.reload() // reloads page
 
-    }catch(err){
+    }catch(err){ // throws error if caught
         console.log(err)
     }
 }
 
-async function markUnComplete(){
-    const itemText = this.parentNode.childNodes[1].innerText
-    try{
-        const response = await fetch('markUnComplete', {
-            method: 'put',
-            headers: {'Content-Type': 'application/json'},
+async function markUnComplete(){ // async function to mark uncomplete
+    const itemText = this.parentNode.childNodes[1].innerText // item's childNode's innerText
+    try{ 
+        const response = await fetch('markUnComplete', {// calls fetch to mark uncomplete
+            method: 'put', // uses put method to update
+            headers: {'Content-Type': 'application/json'}, // using json
             body: JSON.stringify({
-                'itemFromJS': itemText
+                'itemFromJS': itemText //tells which item to update (itemText)
             })
           })
-        const data = await response.json()
-        console.log(data)
-        location.reload()
+        const data = await response.json() // awaits response
+        console.log(data) // consoles data
+        location.reload() // reloads page
+
 
-    }catch(err){
+    }catch(err){ // throws error if caught
         console.log(err)
     }
 }

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') // requires express
+const app = express() // calls express and stores it in a variable 'app'
+const MongoClient = require('mongodb').MongoClient //gives access to mongodb
+const PORT = 2121 // variable for port in case it needs to be changed
+require('dotenv').config() //required for .env to store sensitive data
 
 
-let db,
-    dbConnectionStr = process.env.DB_STRING,
-    dbName = 'todo'
+let db, // declares db
+    dbConnectionStr = process.env.DB_STRING, // declares connection string. stores variable in env string
+    dbName = 'todo' // declares the database name in mongo
 
-MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true })
+MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true }) // awaits mongo. connects mongodb
     .then(client => {
-        console.log(`Connected to ${dbName} Database`)
-        db = client.db(dbName)
+        console.log(`Connected to ${dbName} Database`) 
+        db = client.db(dbName) // connects to db within mongo
     })
 
-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 up view engine to ejs
+app.use(express.static('public')) // able to use public folder for static files
+app.use(express.urlencoded({ extended: true })) // able to parse incoming request bodies that are url encoded
+app.use(express.json()) // able to use json requests with express
 
 
-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)=>{ // get request. root directory
+    const todoItems = await db.collection('todos').find().toArray() //awaits the todo collection within the db
+    const itemsLeft = await db.collection('todos').countDocuments({completed: false}) // awaits another collection. marks it as not completed
+    response.render('index.ejs', { items: todoItems, left: itemsLeft }) // render the index ejs file. names of the items is todoItems and the items left are itemsLeft. 
     // 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) => { // post request. api endpoint  is addTodo
+    db.collection('todos').insertOne({thing: request.body.todoItem, completed: false}) // takes name from form and assigns it to thing. it inserts that one thing into the collection on mongo
     .then(result => {
-        console.log('Todo Added')
-        response.redirect('/')
+        console.log('Todo Added') // console notification
+        response.redirect('/') // redirects to root
     })
-    .catch(error => console.error(error))
+    .catch(error => console.error(error)) // throws error
 })
 
-app.put('/markComplete', (request, response) => {
-    db.collection('todos').updateOne({thing: request.body.itemFromJS},{
+app.put('/markComplete', (request, response) => { // put (update) request. endpoint is markComplete
+    db.collection('todos').updateOne({thing: request.body.itemFromJS},{ // targets one and updates the thing
         $set: {
-            completed: true
+            completed: true // sets to true
           }
     },{
-        sort: {_id: -1},
-        upsert: false
+        sort: {_id: -1}, // sorts by id descending
+        upsert: false // upsert inserts rows into db table. 
     })
     .then(result => {
-        console.log('Marked Complete')
-        response.json('Marked Complete')
+        console.log('Marked Complete') // lets developer know its done
+        response.json('Marked Complete') // lets user know its done
     })
-    .catch(error => console.error(error))
+    .catch(error => console.error(error))// throws error
 
 })
 
-app.put('/markUnComplete', (request, response) => {
-    db.collection('todos').updateOne({thing: request.body.itemFromJS},{
+app.put('/markUnComplete', (request, response) => { // put request. marks incomplete
+    db.collection('todos').updateOne({thing: request.body.itemFromJS},{ // targets item and updates thing
         $set: {
-            completed: false
+            completed: false // sets to false
           }
     },{
-        sort: {_id: -1},
-        upsert: false
+        sort: {_id: -1}, // sorts by id descending
+        upsert: false // upsert inserts rows into db table. 
     })
     .then(result => {
-        console.log('Marked Complete')
-        response.json('Marked Complete')
+        console.log('Marked Complete') // lets developer know its don
+        response.json('Marked Complete') // lets user know its done
     })
-    .catch(error => console.error(error))
+    .catch(error => console.error(error)) // throws error
 
 })
 
-app.delete('/deleteItem', (request, response) => {
-    db.collection('todos').deleteOne({thing: request.body.itemFromJS})
-    .then(result => {
-        console.log('Todo Deleted')
-        response.json('Todo Deleted')
+app.delete('/deleteItem', (request, response) => { // deletes request. endpoint is deleteItem
+    db.collection('todos').deleteOne({thing: request.body.itemFromJS}) // targets thing and deletes the one thing
+    .then(result => { 
+        console.log('Todo Deleted')// lets developer know its done
+        response.json('Todo Deleted') // lets user know its done
     })
-    .catch(error => console.error(error))
+    .catch(error => console.error(error))// throws error
 
 })
 
-app.listen(process.env.PORT || PORT, ()=>{
-    console.log(`Server running on port ${PORT}`)
+app.listen(process.env.PORT || PORT, ()=>{ // listens for port
+    console.log(`Server running on port ${PORT}`) // consoles port
 })

views/index.ejs

@@ -1,47 +1,62 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<!-- declares doctype -->
+<!DOCTYPE html> 
+<!-- tells what language -->
+<html lang="en"> 
+    <!-- start head element -->
+<head> 
+    <!-- tells what characterset  -->
+    <meta charset="UTF-8"> 
+    <!-- says whats compatible -->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
+    <!-- tells viewport -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+    <!-- title of document -->
     <title>Document</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
-    <link rel="stylesheet" href="css/style.css">
+    <!-- stylesheet for font awesome icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> 
+    <!-- link to stylesheets -->
+    <link rel="stylesheet" href="css/style.css"> 
 </head>
-<body>
-    <!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <h1>Todo List: </h1>
-    <ul class="todoItems">
+<!-- starts body -->
+<body> 
+    <!-- title element -->
+    <h1>Todo List: </h1> 
+    <!-- unordered list with todoitems class -->
+    <ul class="todoItems"> 
+        <!-- ejs loop starting with 0 and ending with length of items array -->
     <% for(let i=0; i < items.length; i++) {%>
-        <li class="item">
-            <% if(items[i].completed === true) {%>
-                <span class='completed'><%= items[i].thing %></span>
+        <!-- each list item -->
+        <li class="item"> 
+            <!-- if item is completed -->
+            <% if(items[i].completed === true) {%> 
+                <!-- completed class with item thing -->
+                <span class='completed'><%= items[i].thing %></span> 
             <% }else{ %>
-                <span><%= items[i].thing %></span>
+                <!-- item without completed class -->
+                <span><%= items[i].thing %></span> 
             <% } %>    
-            <span class='fa fa-trash'></span>
+            <!-- trash can  -->
+            <span class='fa fa-trash'></span> 
         </li>
     <% } %>
     </ul>
 
-    <h2>Left to do: <%= left %></h2>
+    <!-- left to do. assuming left is a number -->
+    <h2>Left to do: <%= left %></h2> 
+    <!-- left to do  -->
+    <h2>Add A Todo:</h2> 
 
-    <h2>Add A Todo:</h2>
+    <!-- form that calls addTodo -->
+    <form action="/addTodo" method="POST"> 
 
-    <form action="/addTodo" method="POST">
-        <input type="text" placeholder="Thing To Do" name="todoItem">
-        <input type="submit">
+        <input type="text" placeholder="Thing To Do" name="todoItem"> 
+        <!-- text input -->
+        <input type="submit"> 
+        <!-- submit button -->
     </form>
 
 
-    <script src='js/main.js'></script>
+    <script src='js/main.js'></script> 
+    <!-- calls js main file -->
 </body>
 </html>