Update files with current data

.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "standard"
+    ],
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "rules": {
+    }
+};

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

03_15/Book.js

@@ -1,28 +1,27 @@
 class Book {
-    constructor(
-      title,
-      author,
-      ISBN,
-      pubYear,
-      pageNumber,
-      currentPage,
-      readStatus,
-    ) {
-      this.title = title;
-      this.author = author;
-      this.ISBN = ISBN;
-      this.pubYear = pubYear;
-      this.pageNumber = pageNumber;
-      this.currentPage = currentPage;
-      this.readStatus = readStatus;
-    }
-    updateCurrentPage(newCurrentPage) {
-      this.currentPage = newCurrentPage;
-    }
-    updateReadStatus(newReadStatus) {
-      this.readStatus= newReadStatus;
-    }
+  constructor(
+    title,
+    author,
+    ISBN,
+    pubYear,
+    pageNumber,
+    currentPage,
+    readStatus
+  ) {
+    this.title = title;
+    this.author = author;
+    this.ISBN = ISBN;
+    this.pubYear = pubYear;
+    this.pageNumber = pageNumber;
+    this.currentPage = currentPage;
+    this.readStatus = readStatus;
   }
-
-  export default Book;
-
+  updateCurrentPage(newCurrentPage) {
+    this.currentPage = newCurrentPage;
+  }
+  updateReadStatus(newReadStatus) {
+    this.readStatus = newReadStatus;
+  }
+}
+
+export default Book;

03_15/script.js

@@ -33,7 +33,7 @@ const surveillanceCapitalism = new Book(
   691,
   "Finished"
 );
-console.log(surveillanceCapitalism)
+console.log(surveillanceCapitalism);
 
 const consciousCreative = new Book(
   "The Conscious Creative",
@@ -44,7 +44,7 @@ const consciousCreative = new Book(
   216,
   "Finished"
 );
-console.log(consciousCreative)
+console.log(consciousCreative);
 
 const techVirtues = new Book(
   "Technology and the Virtues",

07_05/script.js

@@ -2,38 +2,46 @@
  * Solution: Build and modify an array
  * - Build an array with 8 items
  * - Remove the last item
- * - Add the last item as the first item on the array 
+ * - Add the last item as the first item on the array
  * - Sort the items by alphabetical order
  * - Use the find() method to find a specific item in the array
  * - Remove the item you found using the find method from the array.
  */
 
-const deskArray = ["pen", "camera", "phone", "notebook", "headphones", "lightbulb", "USB drive"]
-console.log("Original array:", deskArray)
+const deskArray = [
+  "pen",
+  "camera",
+  "phone",
+  "notebook",
+  "headphones",
+  "lightbulb",
+  "usb drive",
+];
+console.log("Original array:", deskArray);
 
 // Remove the last item:
 // @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop
-// deskArray.pop()
-// console.log("New array:", deskArray)
+// deskArray.pop();
+// console.log("New array:", deskArray);
 
-// Add last item as the firs item on the array:
+// Add last item as the first item on the array:
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift
-// deskArray.unshift(deskArray.pop())
-// console.log("Last item is now first:", deskArray)
+// deskArray.unshift(deskArray.pop());
+// console.log("Last item is now first:", deskArray);
 
 // Sort items by alphabetical order:
 // @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
-// deskArray.sort()
-// console.log("Sorted array:", deskArray)
+// deskArray.sort();
+// console.log("Sorted array:", deskArray);
 
 // Find "notebook":
 // @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
-// const foundItem = deskArray.find(item => item === "notebook");
-// console.log("Found item:", foundItem)
+// const foundItem = deskArray.find((item) => item === "notebook");
+// console.log("Found item:", foundItem);
 
 // Find and remove an item:
 // @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
 // @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
-// let remove = "notebook"
-// deskArray.splice(deskArray.indexOf(remove), 1)
-// console.log(`Array with "${remove}" removed:`, deskArray)
+// let remove = "notebook";
+// deskArray.splice(deskArray.indexOf(remove), 1);
+// console.log(`Array with "${remove}" removed:`, deskArray);

08_16/script.js

@@ -21,7 +21,6 @@ const everydayPack = new Backpack(
 );
 
 const content = `
-  
     <figure class="backpack__image">
       <img src=${everydayPack.image} alt="" />
     </figure>

08_17/script.js

@@ -7,13 +7,18 @@
  */
 import backpackObjectArray from "./components/data.js";
 
-const main = document.querySelector(".maincontent");
-
+// Map throught the array and make a new array
 const content = backpackObjectArray.map((backpack) => {
+  // "backpack" now holds a single backpack object
+
+  // Create new article
   let backpackArticle = document.createElement("article");
   backpackArticle.classList.add("backpack");
+
+  // Set article ID to the backpack.id property
   backpackArticle.setAttribute("id", backpack.id);
 
+  // Set the innerHTML of backpackArticle using the backpack object.
   backpackArticle.innerHTML = `
     <figure class="backpack__image">
       <img src=${backpack.image} alt="" loading="lazy" />
@@ -41,9 +46,15 @@ const content = backpackObjectArray.map((backpack) => {
       }</span></li>
     </ul>
   `;
+
+  // Return the backpackArticle to the content array.
   return backpackArticle;
 });
 
+// Get the main
+const main = document.querySelector(".maincontent");
+
+// Loop through the content array to append each backpack article.
 content.forEach((backpack) => {
   main.append(backpack);
 });

09_07/script-advanced.js

@@ -1,9 +1,11 @@
 /**
  * Challenge: Create an event listener
- * - Find each element with the .backpack__strap class
- * - Create function to iterate through above elements
- * - Use the data-side attribute to identify what strap you are working on
- * - Create form with a number input and a submit button
+ * - Find the two elements with the .backpack__strap class.
+ * - Create a function to output the strap length form.
+ * - Iterate through each item with the .backpack__strap class.
+ * - Capture the value of the data-side attribute to indicate the strap side.
+ * - Create a form element.
+ * - Populate the form with an input and a submit button.
  * - Add event listener to each of the strap length forms.
  * - Update strap length value with value submitted from form.
  */
@@ -13,31 +15,32 @@ import backpackObjectArray from "./components/data.js";
  * Add event listener to the lid-toggle button.
  */
 const lidToggle = function (event, button, newArg) {
-  console.log(event)
-  console.log(newArg)
-   
+  console.log(event);
+  console.log(newArg);
+
   // Find the current backpack object in backpackObjectArray
-  let backpackObject = backpackObjectArray.find( ({ id }) => id === button.parentElement.id );
-
+  let backpackObject = backpackObjectArray.find(
+    ({ id }) => id === button.parentElement.id
+  );
+
   // Toggle lidOpen status
-  backpackObject.lidOpen == true 
-    ? backpackObject.lidOpen = false 
-    : backpackObject.lidOpen = true;
+  backpackObject.lidOpen == true
+    ? (backpackObject.lidOpen = false)
+    : (backpackObject.lidOpen = true);
 
   // Toggle button text
-  button.innerText == "Open lid" 
-    ? button.innerText = "Close lid" 
-    : button.innerText = "Open lid";
+  button.innerText == "Open lid"
+    ? (button.innerText = "Close lid")
+    : (button.innerText = "Open lid");
 
   // Set visible property status text
   let status = button.parentElement.querySelector(".backpack__lid span");
   status.innerText == "closed"
     ? (status.innerText = "open")
     : (status.innerText = "closed");
-}
+};
 
 const backpackList = backpackObjectArray.map((backpack) => {
-
   let backpackArticle = document.createElement("article");
   backpackArticle.classList.add("backpack");
   backpackArticle.setAttribute("id", backpack.id);
@@ -58,10 +61,10 @@ const backpackList = backpackObjectArray.map((backpack) => {
       <li class="feature backpack__pockets">Number of pockets:<span> ${
         backpack.pocketNum
       }</span></li>
-      <li class="feature backpack__strap" data-side="left">Left strap length:<span> ${
+      <li class="feature backpack__strap" data-side="left">Left strap length: <span>${
         backpack.strapLength.left
       } inches</span></li>
-      <li class="feature backpack__strap" data-side="right">Right strap length:<span> ${
+      <li class="feature backpack__strap" data-side="right">Right strap length: <span>${
         backpack.strapLength.right
       } inches</span></li>
       <li class="feature backpack__lid">Lid status: <span>${
@@ -70,14 +73,14 @@ const backpackList = backpackObjectArray.map((backpack) => {
     </ul>
     <button class="lid-toggle">Open lid</button>
   `;
-  
+
   let button = backpackArticle.querySelector(".lid-toggle");
-  let newArg = "The argument I want to pass to the callback function!"
+  let newArg = "The argument I want to pass to the callback function!";
 
   // Add event listener
   button.addEventListener("click", (event) => {
-    lidToggle(event, button, newArg)
-  })
+    lidToggle(event, button, newArg);
+  });
 
   return backpackArticle;
 });
@@ -88,5 +91,3 @@ const main = document.querySelector(".maincontent");
 backpackList.forEach((backpack) => {
   main.append(backpack);
 });
-
-