LinkedInLearning · budiali · Jan 22, 2024
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/02_04/backpack.js b/02_04/backpack.js
@@ -1,5 +1,6 @@
 const updateBackpack = (update) => {
   let main = document.querySelector("main");
+  // eslint-disable-next-line no-undef
   main.innerHTML = markup(backpack);
   console.info(update);
 };

diff --git a/03_03/script.js b/03_03/script.js
@@ -2,6 +2,7 @@
  * Create a Backpack object.
  */
 
+// eslint-disable-next-line no-unused-vars
 const backpack = {
   name: "Everyday Backpack",
   volume: 30,

diff --git a/03_10/Box.js b/03_10/Box.js
@@ -0,0 +1,24 @@
+// class Name {}
+// const Name = class {}
+
+// eslint-disable-next-line no-unused-vars
+const Box = class {
+  constructor(name, volume, lidOpen, strapLengthL, strapLengthR) {
+    (this.name = name), (this.volume = volume), (this.lidOpen = lidOpen);
+    this.strapLength = {
+      left: strapLengthL,
+      right: strapLengthR,
+    };
+  }
+
+  toggleLid(lidStatus) {
+    this.lidOpen = lidStatus;
+  }
+
+  newStrapLength(strapLeft, strapRight) {
+    this.strapLengthL = strapLeft;
+    this.strapLengthR = strapRight;
+  }
+};
+
+export default Box;
diff --git a/03_10/index.html b/03_10/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Classes</title>
     <script type="module" src="Backpack.js"></script>
+    <script type="module" src="Box.js"></script>
     <script type="module" src="script.js"></script>
   </head>
   <body></body>

diff --git a/03_10/script.js b/03_10/script.js
@@ -3,7 +3,10 @@
  * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
  */
 import Backpack from "./Backpack.js";
+// eslint-disable-next-line no-unused-vars
+import Box from "./Box.js";
 
+// eslint-disable-next-line no-unused-vars
 const everydayPack = new Backpack(
   "Everyday Backpack",
   30,
@@ -14,5 +17,10 @@ const everydayPack = new Backpack(
   false
 );
 
-console.log("The everydayPack object:", everydayPack);
-console.log("The pocketNum value:", everydayPack.pocketNum);
+// console.log("The everydayPack object:", everydayPack);
+// console.log("The pocketNum value:", everydayPack.pocketNum);
+
+// eslint-disable-next-line no-unused-vars
+const everyDayBox = new Box("KRETEK FILTERS", 16, false, 10, 15);
+
+console.log("Box Cigarettes Object:", everyDayBox);
diff --git a/04_01/index.html b/04_01/index.html
@@ -7,20 +7,5 @@
     <script type="module" src="Backpack.js"></script>
     <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>
+  <body></body>
 </html>
diff --git a/04_01/script.js b/04_01/script.js
@@ -6,7 +6,7 @@
 import Backpack from "./Backpack.js";
 
 const everydayPack = new Backpack(
-  "Everyday Backpack",
+  "Eiger Backpack",
   30,
   "grey",
   15,
@@ -16,6 +16,27 @@ const everydayPack = new Backpack(
   "December 5, 2018 15:00:00 PST"
 );
 
+// This is a Template Literals , Modern
+// eslint-disable-next-line no-unused-vars
+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());
diff --git a/04_02/script.js b/04_02/script.js
@@ -6,7 +6,7 @@
 import Backpack from "./Backpack.js";
 
 const everydayPack = new Backpack(
-  "Everyday Pack",
+  "Everyday Pack Traditional Output String",
   30,
   "grey",
   15,
@@ -16,22 +16,8 @@ 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>
-`;
+// this is a traditional output string
+const content = "<h1>" + everydayPack.name + "</h1>";
 
 document.body.innerHTML = content;
 

diff --git a/06_03/script.js b/06_03/script.js
@@ -3,17 +3,37 @@
  * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
  */
 
-var color = "purple";
+// var color = "bluesky";
 
-document.querySelector(".left").style.backgroundColor = color;
-document.querySelector(".left .color-value").innerHTML = color;
+// document.querySelector(".left").style.backgroundColor = color;
+// document.querySelector(".left .color-value").innerHTML = color;
 
-document.querySelector(".right").style.backgroundColor = color;
-document.querySelector(".right .color-value").innerHTML = color;
+// color = "bluesky";
 
+// document.querySelector(".right").style.backgroundColor = color;
+// document.querySelector(".right .color-value").innerHTML = color;
+
+// -----
 // function headingColor() {
 //   color = "blue";
 //   document.querySelector(".title").style.color = color;
 // }
 
 // headingColor();
+
+// let a = 10;
+// let b = 5;
+// let c = 3.7;
+
+// console.log(`let a: ${a} , typeof ${typeof a}`);
+// console.log(`let b: ${b} , typeof ${typeof b}`);
+// console.log(`let c: ${c} , typeof ${typeof c}`);
+
+// let result = a - c;
+// console.log(`result : ${result}`);
+
+const factorial = function fac(n) {
+  return n < 2 ? 1 : n * fac(n - 1);
+};
+
+console.log(`factorial result: ${factorial(4)}`);
diff --git a/Practice/03_07/script.js b/Practice/03_07/script.js
@@ -7,3 +7,36 @@
  * - 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.
  */
+
+// eslint-disable-next-line no-unused-vars
+const boxCigarettes = {
+  name: "L.A ICE",
+  volume: 16,
+  size: {
+    width: 5,
+    length: 15,
+  },
+  material: "Stainles",
+  boxOpen: false,
+  methodOpen: "Button",
+  toggleLid: function (boxStatus) {
+    this.boxOpen = boxStatus;
+  },
+  pressButton: {
+    inPress: "Open Box",
+    outPress: "Close Box",
+  },
+  onPressButton: function (xInPress, xOutPress) {
+    (this.pressButton.inPress = xInPress),
+      (this.pressButton.outPress = xOutPress);
+  },
+};
+
+// console.log("This object box cigarettes", boxCigarettes);
+// console.log("This properties volume: ", boxCigarettes.volume);
+// console.log("This properties size width: ", boxCigarettes.size.width);
+// console.log("This properties value size: ", boxCigarettes.size);
+
+// console.log("value before press button: ", boxCigarettes.pressButton.inPress);
+// boxCigarettes.onPressButton("Openn", "Closee");
+// console.log("value after press button: ", boxCigarettes.pressButton.inPress);
diff --git a/Practice/03_09/script.js b/Practice/03_09/script.js
@@ -7,6 +7,7 @@
  * - Test the method by sending new values and checking the properties in the console.
  */
 
+// eslint-disable-next-line no-unused-vars
 const backpack = {
   name: "Everyday Backpack",
   volume: 30,
@@ -23,4 +24,7 @@ const backpack = {
     this.strapLength.left = lengthLeft;
     this.strapLength.right = lengthRight;
   },
+
+  // method object property name
+  methodName: function () {},
 };