🙌 Add comments to todo app

.vscode/settings.json

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

public/css/style.css

@@ -1,7 +1,9 @@
-h1{
+/* set the H1 text color to red */
+h1 {
     color: red;
 }
-.completed{
+/* set the completed items to gray, and strike a line through the text */
+.completed {
     color: gray;
     text-decoration: line-through;
-}
+}

public/js/main.js

@@ -1,72 +1,111 @@
-const deleteBtn = document.querySelectorAll('.fa-trash')
-const item = document.querySelectorAll('.item span')
-const itemCompleted = document.querySelectorAll('.item span.completed')
+// create a "nodelist" of every item with these classes (trash icon)
+const deleteBtn = document.querySelectorAll(".fa-trash");
+// create a "nodelist" of every item with these classes (item span)
+const item = document.querySelectorAll(".item span");
+// create a "nodelist" of every item with these classes (item, completed)
+const itemCompleted = document.querySelectorAll(".item span.completed");
 
-Array.from(deleteBtn).forEach((element)=>{
-    element.addEventListener('click', deleteItem)
-})
+// create an array from these node lists, and add event listeners to each one
+Array.from(deleteBtn).forEach((element) => {
+    // run the deleteItem function when we click on the item
+    element.addEventListener("click", deleteItem);
+});
 
-Array.from(item).forEach((element)=>{
-    element.addEventListener('click', markComplete)
-})
+Array.from(item).forEach((element) => {
+    // run the markComplete function when we click on the item
+    element.addEventListener("click", markComplete);
+});
 
-Array.from(itemCompleted).forEach((element)=>{
-    element.addEventListener('click', markUnComplete)
-})
+Array.from(itemCompleted).forEach((element) => {
+    // run the markUnComplete function when we click on the item
+    element.addEventListener("click", markUnComplete);
+});
 
-async function deleteItem(){
-    const itemText = this.parentNode.childNodes[1].innerText
-    try{
-        const response = await fetch('deleteItem', {
-            method: 'delete',
-            headers: {'Content-Type': 'application/json'},
+// delete item function
+async function deleteItem() {
+    // from the trash icon, go up to the parent node (the <li>)
+    // then go to the second child node (index 0), and grab the innerText
+    // essentially - save the todo item text in a variable
+    const itemText = this.parentNode.childNodes[1].innerText;
+    try {
+        // make a fetch request to the deleteItem route
+        const response = await fetch("deleteItem", {
+            // DELETE method
+            method: "delete",
+            // set the headers to json
+            headers: { "Content-Type": "application/json" },
+            // in the body of the text
             body: JSON.stringify({
-              'itemFromJS': itemText
-            })
-          })
-        const data = await response.json()
-        console.log(data)
-        location.reload()
-
-    }catch(err){
-        console.log(err)
+                // send the text of the todo
+                itemFromJS: itemText,
+            }),
+        });
+        // wait for the response
+        const data = await response.json();
+        // log the data
+        console.log(data);
+        // reload the current URL
+        location.reload();
+    } catch (err) {
+        // otherwise log the error
+        console.log(err);
     }
 }
 
-async function markComplete(){
-    const itemText = this.parentNode.childNodes[1].innerText
-    try{
-        const response = await fetch('markComplete', {
-            method: 'put',
-            headers: {'Content-Type': 'application/json'},
+// mark complete function
+async function markComplete() {
+    // grab the text from the todo
+    const itemText = this.parentNode.childNodes[1].innerText;
+    // make a fetch reqeust to the mark complete route
+    try {
+        const response = await fetch("markComplete", {
+            // PUT request
+            method: "put",
+            // json data
+            headers: { "Content-Type": "application/json" },
+            // convert the objects to string
             body: JSON.stringify({
-                'itemFromJS': itemText
-            })
-          })
-        const data = await response.json()
-        console.log(data)
-        location.reload()
-
-    }catch(err){
-        console.log(err)
+                // send the todo text
+                itemFromJS: itemText,
+            }),
+        });
+        // wait for the response
+        const data = await response.json();
+        // log the data
+        console.log(data);
+        // reload the current route
+        location.reload();
+    } catch (err) {
+        // log the error
+        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'},
+// marking an item as uncomplete
+async function markUnComplete() {
+    // grab the todo text
+    const itemText = this.parentNode.childNodes[1].innerText;
+    try {
+        // fetch request to the mark uncomplete route
+        const response = await fetch("markUnComplete", {
+            // PUT request
+            method: "put",
+            // json data is set
+            headers: { "Content-Type": "application/json" },
+            // stringify the object
             body: JSON.stringify({
-                'itemFromJS': itemText
-            })
-          })
-        const data = await response.json()
-        console.log(data)
-        location.reload()
-
-    }catch(err){
-        console.log(err)
+                // send the todo text in the body of the request
+                itemFromJS: itemText,
+            }),
+        });
+        // wait for the response
+        const data = await response.json();
+        // log the data
+        console.log(data);
+        // reload the page
+        location.reload();
+    } catch (err) {
+        // log the error if there is one
+        console.log(err);
     }
-}
+}