LinkedInLearning · c-Fancy · Mar 14, 2025 · Mar 16, 2025 · Mar 16, 2025 · Mar 17, 2025
diff --git a/02_02/index.html b/02_02/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Module demo</title>
-    <script src="script.js"></script>
   </head>
   <body></body>
+  <script src="script.js"></script>
 </html>
diff --git a/03_05/script.js b/03_05/script.js
@@ -20,3 +20,5 @@ const backpack = {
     this.strapLength.right = lengthRight;
   },
 };
+
+console.log("The backpack object:", backpack);
diff --git a/03_06/script.js b/03_06/script.js
@@ -22,3 +22,9 @@ const backpack = {
 };
 
 console.log("The backpack object:", backpack);
+console.log("The pocketNum:", backpack.pocketNum);
+console.log("Strap length:", backpack.strapLength);
+
+let query = "pocketNum";
+
+console.log("The pocketNum:", backpack[query]);
diff --git a/03_08/script.js b/03_08/script.js
@@ -23,3 +23,9 @@ const backpack = {
 
 console.log("The backpack object:", backpack);
 console.log("The pocketNum value:", backpack.pocketNum);
+
+console.log("Left before:", backpack.strapLength.left);
+
+backpack.newStrapLength(10, 15);
+
+console.log("Left after:", backpack.strapLength.left);
diff --git a/03_13/script.js b/03_13/script.js
@@ -18,3 +18,4 @@ const everydayPack = new Backpack(
 
 console.log("The everydayPack object:", everydayPack);
 console.log("Date acquired:", everydayPack.dateAcquired);
+console.log("Days since aquired:", everydayPack.backpackAge(), "Days old");
diff --git a/04_01/index.html b/04_01/index.html
@@ -8,19 +8,6 @@
     <script type="module" src="script.js"></script>
   </head>
   <body>
-    <main>
-      <article>
-        <h1>Everyday Backpack</h1>
-        <ul>
-          <li>Volume:</li>
-          <li>Color:</li>
-          <li>Age:</li>
-          <li>Number of pockets:</li>
-          <li>Left strap length:</li>
-          <li>Right strap length:</li>
-          <li>Lid status:</li>
-        </ul>
-      </article>
-    </main>
+
   </body>
 </html>
diff --git a/04_01/script.js b/04_01/script.js
@@ -16,6 +16,26 @@ const everydayPack = new Backpack(
   "December 5, 2018 15:00:00 PST"
 );
 
+
+const content = `
+<main>
+      <article>
+        <h1>${everydayPack.name}</h1>
+        <ul>
+          <li>Volume: ${everydayPack.volume}</li>
+          <li> Color: ${everydayPack.color}</li>
+          <li>Age: ${everydayPack.backpackAge()}</li>
+          <li>Number of Pockets: ${everydayPack.pocketNum}</li>
+          <li>Left strap length: ${everydayPack.strapLength.left}</li>
+          <li>Right strap length: ${everydayPack.strapLength.right}</li>
+          <li>Lid status: ${everydayPack.lidOpen}</li>
+        </ul>
+      </article>
+    </main>
+`;
+
+document.body.innerHTML = content;
+
 console.log("The everydayPack object:", everydayPack);
 console.log("The pocketNum value:", everydayPack.pocketNum);
-console.log("Days since aquired:", everydayPack.backpackAge());
+console.log("Days since aquired:", everydayPack.backpackAge());
diff --git a/04_02/script.js b/04_02/script.js
@@ -16,22 +16,7 @@ const everydayPack = new Backpack(
   "December 5, 2018 15:00:00 PST"
 );
 
-const content = `
-  <main>
-    <article>
-      <h1>${everydayPack.name}</h1>
-      <ul>
-        <li>Volume: ${everydayPack.volume}</li>
-        <li>Color: ${everydayPack.color}</li>
-        <li>Age: ${everydayPack.backpackAge()}</li>
-        <li>Number of pockets: ${everydayPack.pocketNum}</li>
-        <li>Left strap length: ${everydayPack.strapLength.left}</li>
-        <li>Right strap length: ${everydayPack.strapLength.right}</li>
-        <li>Lid status: ${everydayPack.lidOpen}</li>
-      </ul>
-    </article>
-  </main>
-`;
+const content = "<h1>" + everydayPack.name + "</h1>";
 
 document.body.innerHTML = content;
 

diff --git a/05_09/script.js b/05_09/script.js
@@ -19,7 +19,6 @@ const everydayPack = new Backpack(
 );
 
 const content = `
-  <article class="backpack" id="everyday">
     <figure class="backpack__image">
       <img src=${everydayPack.image} alt="" />
     </figure>
@@ -45,9 +44,13 @@ const content = `
         everydayPack.lidOpen
       }</span></li>
     </ul>
-  </article>
 `;
 
 const main = document.querySelector(".maincontent");
 
-main.innerHTML = content;
+const newArticle = document.createElement("article");
+newArticle.classList.add("backpack");
+newArticle.setAttribute("id", "everyday");
+newArticle.innerHTML = content;
+
+main.append(newArticle);
diff --git a/06_03/script.js b/06_03/script.js
@@ -8,12 +8,14 @@ var color = "purple";
 document.querySelector(".left").style.backgroundColor = color;
 document.querySelector(".left .color-value").innerHTML = color;
 
+color = "skyblue";
+
 document.querySelector(".right").style.backgroundColor = color;
 document.querySelector(".right .color-value").innerHTML = color;
 
-// function headingColor() {
-//   color = "blue";
-//   document.querySelector(".title").style.color = color;
-// }
+function headingColor() {
+  color = "blue";
+  document.querySelector(".title").style.color = color;
+}
 
-// headingColor();
+headingColor();
diff --git a/06_04/script.js b/06_04/script.js
@@ -3,16 +3,17 @@
  * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
  */
 
-var color = "purple";
+let color = "purple";
 
 document.querySelector(".left").style.backgroundColor = color;
 document.querySelector(".left .color-value").innerHTML = color;
 
 color = "skyblue";
 
 function headingColor() {
-  color = "blue";
+  let titleColor = "blue";
   document.querySelector(".title").style.color = color;
+  console.log("inside:", titleColor);
 }
 
 headingColor();

diff --git a/06_05/script.js b/06_05/script.js
@@ -3,12 +3,13 @@
  * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
  */
 
-let color = "purple";
+const color = "purple";
 
 document.querySelector(".left").style.backgroundColor = color;
 document.querySelector(".left .color-value").innerHTML = color;
 
-color = "skyblue";
+// will stop rendering, can't reasign to a const
+// color = "skyblue";
 
 function headingColor() {
   let color = "blue";

diff --git a/06_06/script.js b/06_06/script.js
@@ -16,7 +16,7 @@ console.log("Floating point number:", floatDemo);
 
 // Boolean:
 let booleanDemo = true;
-console.log("Boolean value:", booleanDemo);
+console.log("Boolean value:", typeof booleanDemo);
 
 // Null value (nothing):
 let nullDemo = null;

diff --git a/06_07/script.js b/06_07/script.js
@@ -9,7 +9,7 @@ let b = 4;
 console.log(`let a: ${a} (${typeof a})`);
 console.log(`let b: ${b} (${typeof b})`);
 
-if (a == b) {
+if (a != b) {
   console.log(`Match! let a and let b are the same value.`);
 } else {
   console.error(`No match: let a and let b are NOT same value.`);

diff --git a/06_08/script.js b/06_08/script.js
@@ -3,14 +3,14 @@
  * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#Arithmetic_operators
  */
 
-let a = 5;
-let b = 4;
+let a = 15;
+let b = "4";
 let c = 3.2;
 
 console.log(`let a: ${a} (${typeof a})`);
 console.log(`let b: ${b} (${typeof b})`);
 console.log(`let c: ${c} (${typeof c})`);
 
-let result = a + b;
+let result = a - b;
 
 console.log("Result: ", result);
diff --git a/Practice/03_07/script.js b/Practice/03_07/script.js
@@ -7,3 +7,17 @@
  * - Find an object that has another object inside of it to create a nested object.
  * - Test your objects in the browser console by accessing the entire object and its specific properties.
  */
+
+const car = {
+  name: "Subaru Crosstrek",
+  color: "blue",
+  passengers: 5,
+  awd: true,
+};
+
+console.log(car);
+console.log("The kind of vehicle:", car.name);
+console.log("How many passengers can it hold:", car.passengers);
+
+let color = "color";
+console.log("What is the color:", car[color]);
diff --git a/Practice/03_09/script.js b/Practice/03_09/script.js
@@ -23,4 +23,23 @@ const backpack = {
     this.strapLength.left = lengthLeft;
     this.strapLength.right = lengthRight;
   },
+
+  newBackpack: function (nameChange) {
+    this.name = nameChange;
+  },
+
+  newColor: function (colorChange) {
+    this.color = colorChange;
+  },
 };
+
+console.log("The backpack object:", backpack);
+
+console.log("Today I will take the", backpack.name);
+
+backpack.newBackpack("Adventure Backpack");
+
+console.log("I'm going on a hike and will take", backpack.name);
+
+backpack.newColor("blue");
+console.log("and the color will be", backpack.color);
diff --git a/Practice/03_12/car.js b/Practice/03_12/car.js
@@ -0,0 +1,24 @@
+/**
+ * Creating classes:
+ *
+ * Class declaration: class Name {}
+ * Class expression:  const Name = class {}
+ */
+
+class car {
+  constructor(name, year, color, passengers, doors, doorsOpen) {
+    this.name = name;
+    this.year = year;
+    this.color = color;
+    this.passengers = passengers;
+    this.doors = doors;
+    this.doorsOpen = doorsOpen;
+  }
+
+  // method to open the door
+  toggleDoors(doorChange) {
+    this.doorsOpen = doorChange;
+  }
+}
+
+export default car;
diff --git a/Practice/03_12/index.html b/Practice/03_12/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Practice: Making classes and objects</title>
-    <script type="module" src="Backpack.js"></script>
+    <script type="module" src="car.js"></script>
     <script type="module" src="script.js"></script>
   </head>
   <body></body>

diff --git a/Practice/03_12/script.js b/Practice/03_12/script.js
@@ -6,3 +6,18 @@
  * - Create several objects using the class.
  * - Test the objecs by calling their properties and using their methods in the console.
  */
+
+import car from "./car.js";
+
+const subaruCar = new car("Crosstrek", 2018, "blue", 4, 4, false);
+
+console.log("The car I currently drive is:", subaruCar.name);
+console.log("The doors are currently:", subaruCar.doorsOpen);
+
+subaruCar.toggleDoors(true);
+
+console.log("The doors are currently:", subaruCar.doorsOpen);
+
+const toyotaCar = new car("Corolla", 2020, "red", 4, 4, false);
+console.log("The car I currently drive is:", toyotaCar.name);
+console.log("What year is the car:", toyotaCar.year);
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,3 +20,5 @@ const backpack = { @@
         this.strapLength.right = lengthRight;
       },
     };
+    console.log("The backpack object:", backpack);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,3 +18,4 @@ const everydayPack = new Backpack(

		console.log("The everydayPack object:", everydayPack);
		console.log("Date acquired:", everydayPack.dateAcquired);
		console.log("Days since aquired:", everydayPack.backpackAge(), "Days old");