added comments to js and ejs files

.vscode/settings.json

@@ -1,4 +1,21 @@
 {
-    "editor.fontSize": 42,
-    "terminal.integrated.fontSize": 60
+    "editor.fontSize": 15,
+    "terminal.integrated.fontSize": 60,
+    "workbench.colorCustomizations": {
+        "activityBar.activeBackground": "#29ae01",
+        "activityBar.activeBorder": "#013cfe",
+        "activityBar.background": "#29ae01",
+        "activityBar.foreground": "#e7e7e7",
+        "activityBar.inactiveForeground": "#e7e7e799",
+        "activityBarBadge.background": "#013cfe",
+        "activityBarBadge.foreground": "#e7e7e7",
+        "statusBar.background": "#1d7b01",
+        "statusBar.foreground": "#e7e7e7",
+        "statusBarItem.hoverBackground": "#29ae01",
+        "titleBar.activeBackground": "#1d7b01",
+        "titleBar.activeForeground": "#e7e7e7",
+        "titleBar.inactiveBackground": "#1d7b0199",
+        "titleBar.inactiveForeground": "#e7e7e799"
+    },
+    "peacock.color": "#1d7b01"
 }

public/js/main.js

@@ -1,69 +1,90 @@
+// set up the delete, todo, and todo completed buttons
 const deleteBtn = document.querySelectorAll('.del')
 const todoItem = document.querySelectorAll('.todoItem span')
 const todoComplete = document.querySelectorAll('.todoItem span.completed')
 
-Array.from(deleteBtn).forEach((el)=>{
+// create a new array from the deleteTodo elements
+Array.from(deleteBtn).forEach((el) => {
+    // call deleteTodo on delete class elelemts
     el.addEventListener('click', deleteTodo)
 })
-
-Array.from(todoItem).forEach((el)=>{
+// create a new array from the markComplete elements
+Array.from(todoItem).forEach((el) => {
+    // call markComplete on todoItem class and span sibling element
     el.addEventListener('click', markComplete)
 })
-
-Array.from(todoComplete).forEach((el)=>{
+// create a new array from the undo elements
+Array.from(todoComplete).forEach((el) => {
+    // call undo on .todoItem span.completed siblings elemetns
     el.addEventListener('click', undo)
 })
-
-async function deleteTodo(){
+// function to delete todo items
+async function deleteTodo() {
+    // assign the inner text of the second child node to todoText
     const todoText = this.parentNode.childNodes[1].innerText
-    try{
+    try {
+        // wait for the response from deleteTodo
         const response = await fetch('deleteTodo', {
             method: 'delete',
-            headers: {'Content-type': 'application/json'},
+            headers: { 'Content-type': 'application/json' },
             body: JSON.stringify({
                 'rainbowUnicorn': todoText
             })
         })
+        // store the response json data
         const data = await response.json()
         console.log(data)
+        // reload the current page
         location.reload()
-    }catch(err){
+    } catch (err) {
+        // log any error caught in this block 
         console.log(err)
     }
 }
-
-async function markComplete(){
+// function to mark items as complete
+async function markComplete() {
     const todoText = this.parentNode.childNodes[1].innerText
-    try{
+    try {
+        // wait for the response from markCmplete 
         const response = await fetch('markComplete', {
             method: 'put',
-            headers: {'Content-type': 'application/json'},
+            headers: { 'Content-type': 'application/json' },
+            // convert server json data to string 
             body: JSON.stringify({
                 'rainbowUnicorn': todoText
             })
         })
+        // store the response json data
         const data = await response.json()
         console.log(data)
+        // reload the current page
         location.reload()
-    }catch(err){
+    } catch (err) {
+        // log any error cauught in this block
         console.log(err)
     }
 }
-
-async function undo(){
+// function to undo an action on the client side
+async function undo() {
     const todoText = this.parentNode.childNodes[1].innerText
-    try{
+    try {
+        // wait for the response from undo
         const response = await fetch('undo', {
+            // carry out a put request
             method: 'put',
-            headers: {'Content-type': 'application/json'},
+            headers: { 'Content-type': 'application/json' },
+            // convert server data to string
             body: JSON.stringify({
                 'rainbowUnicorn': todoText
             })
         })
         const data = await response.json()
+        // log json data to the console
         console.log(data)
+        // reload the current page
         location.reload()
-    }catch(err){
+    } catch (err) {
+        // log any caught error within this block
         console.log(err)
     }
 }

server.js

@@ -1,74 +1,102 @@
+// use express from node modules
 const express = require('express')
+// create the express object to use in this app
 const app = express()
+// use mongodb from node modules
 const MongoClient = require('mongodb').MongoClient
+// define the port to use when running app locally
 const PORT = 2121
+// use the .env file as a config file
 require('dotenv').config()
 
+// create database connection strings
 let db,
     dbConnectionStr = process.env.DB_STRING,
+    // declare and initialize db string
     dbName = 'todo'
-
-MongoClient.connect(dbConnectionStr, {useUnifiedTopology: true})
+// i dont know what useUnifiedTopology does or what it controls
+MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true })
     .then(client => {
+        // confirm db connection
         console.log(`Hey, connected to ${dbName} database`)
+        // initialize db conncection
         db = client.db(dbName)
     })
-    .catch(err =>{
+    .catch(err => {
+        // log any caught error
         console.log(err)
     })
-
+// set the ejs view engine
 app.set('view engine', 'ejs')
+// i dont know what this does
 app.use(express.static('public'))
+// this i believe, encodes urls passed through the application
 app.use(express.urlencoded({ extended: true }))
+// use json data 
 app.use(express.json())
 
-app.get('/', async (req,res)=>{
+// send a get request from teh root directory
+app.get('/', async (req, res) => {
+    // collect the todos from the database and convert  to array
     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})
+    // collect the todos which have not been completed
+    const itemsLeft = await db.collection('todos').countDocuments({ completed: false })
+    // use the index ejs file to render the view on the client side
+    res.render('index.ejs', { zebra: todoItems, left: itemsLeft })
 })
 
-app.post('/createTodo', (req, res)=>{
-    db.collection('todos').insertOne({todo: req.body.todoItem, completed: false})
-    .then(result =>{
-        console.log('Todo has been added!')
-        res.redirect('/')
-    })
+// send a post request in the createTodo directory
+app.post('/createTodo', (req, res) => {
+    // insert a todo item and set as incomplete
+    db.collection('todos').insertOne({ todo: req.body.todoItem, completed: false })
+        .then(result => {
+            // confirm the insertion of the new todo item
+            console.log('Todo has been added!')
+            // route the reponse back to the root
+            res.redirect('/')
+        })
 })
 
-app.put('/markComplete', (req, res)=>{
-    db.collection('todos').updateOne({todo: req.body.rainbowUnicorn},{
+// send a put request to the markComplete file
+app.put('/markComplete', (req, res) => {
+    db.collection('todos').updateOne({ todo: req.body.rainbowUnicorn }, {
+        // replace the current with true
         $set: {
             completed: true
         }
     })
-    .then(result =>{
-        console.log('Marked Complete')
-        res.json('Marked Complete')
-    })
+        // confirm change in the console and update the json with the response
+        .then(result => {
+            console.log('Marked Complete')
+            res.json('Marked Complete')
+        })
 })
-
-app.put('/undo', (req, res)=>{
-    db.collection('todos').updateOne({todo: req.body.rainbowUnicorn},{
+// send a put to the undo file
+app.put('/undo', (req, res) => {
+    db.collection('todos').updateOne({ todo: req.body.rainbowUnicorn }, {
+        // replace the current value with false
         $set: {
             completed: false
         }
     })
-    .then(result =>{
-        console.log('Marked Complete')
-        res.json('Marked Complete')
-    })
+        // confirm the result in the console, update the json with the response
+        .then(result => {
+            console.log('Marked Complete')
+            res.json('Marked Complete')
+        })
 })
 
-app.delete('/deleteTodo', (req, res)=>{
-    db.collection('todos').deleteOne({todo:req.body.rainbowUnicorn})
-    .then(result =>{
-        console.log('Deleted Todo')
-        res.json('Deleted It')
-    })
-    .catch( err => console.log(err))
+// send a delete rquest to deleteTodo file
+app.delete('/deleteTodo', (req, res) => {
+    db.collection('todos').deleteOne({ todo: req.body.rainbowUnicorn })
+        // confirm the delete request and update the json file with the response
+        .then(result => {
+            console.log('Deleted Todo')
+            res.json('Deleted It')
+        })
+        .catch(err => console.log(err))
 })
- 
-app.listen(process.env.PORT || PORT, ()=>{
+// set the application to listen for requests
+app.listen(process.env.PORT || PORT, () => {
     console.log('Server is running, you better catch it!')
-})    
+})

views/index.ejs

@@ -10,9 +10,11 @@
 <body>
     <h1>Todos</h1>
     <ul>
+        <!-- dynamically create list of completed, (remove deleted) items on the page -->
     <% for(let i = 0; i < zebra.length; i++) { %>
         <li class='todoItem'>
             <% if(zebra[i].completed === true) {%>
+            <!-- add a completed item to the page -->
             <span class="completed"><%= zebra[i].todo %></span>
             <% }else{ %>
             <span><%= zebra[i].todo %></span>
@@ -21,14 +23,14 @@
         </li>
     <% } %>    
     </ul>
-
+    <!-- show items with completed=false -->
     <h2>Things left to do: <%= left %></h2>
 
     <form action="/createTodo" method='POST'>
         <input type="text" placeholder="Enter Todo Item" name='todoItem'>
         <input type="submit">
     </form>
-
+    <!-- link the main.js file -->
     <script src="js/main.js"></script>
 </body>
 </html>