Update with practice files

AgaraMuthala · Oct 20, 2020 · a757a8f · a757a8f
1 parent 5879c12
commit a757a8f
Show file tree

Hide file tree

Showing 21 changed files with 644 additions and 39 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,15 +1,12 @@
 module.exports = {
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
-    "extends": [
-        "standard"
-    ],
-    "parserOptions": {
-        "ecmaVersion": 12,
-        "sourceType": "module"
-    },
-    "rules": {
-    }
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: "eslint:recommended",
+  parserOptions: {
+    ecmaVersion: 12,
+    sourceType: "module",
+  },
+  rules: {},
 };
diff --git a/09_05e/script.js b/09_05e/script.js
@@ -9,29 +9,29 @@ import backpackObjectArray from "./components/data.js";
  * Add event listener to the lid-toggle button.
  */
 const lidToggle = function () {
-
   // Find the current backpack object in backpackObjectArray
-  let backpackObject = backpackObjectArray.find( ({ id }) => id === this.parentElement.id );
-
+  let backpackObject = backpackObjectArray.find(
+    ({ id }) => id === this.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
-  this.innerText == "Open lid" 
-    ? this.innerText = "Close lid" 
-    : this.innerText = "Open lid";
+  this.innerText == "Open lid"
+    ? (this.innerText = "Close lid")
+    : (this.innerText = "Open lid");
 
   // Set visible property status text
   let status = this.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);
@@ -64,11 +64,11 @@ const backpackList = backpackObjectArray.map((backpack) => {
     </ul>
     <button class="lid-toggle">Open lid</button>
   `;
-  
+
   let button = backpackArticle.querySelector(".lid-toggle");
 
   // Add event listener
-  button.addEventListener("click", lidToggle)
+  button.addEventListener("click", lidToggle);
 
   return backpackArticle;
 });
@@ -79,5 +79,3 @@ const main = document.querySelector(".maincontent");
 backpackList.forEach((backpack) => {
   main.append(backpack);
 });
-
-
diff --git a/Practice/03_07 - making objects/script.js b/Practice/03_07 - making objects/script.js
diff --git a/Practice/03_07 - making objects/index.html → Practice/03_07/index.html b/Practice/03_07 - making objects/index.html → Practice/03_07/index.html
diff --git a/Practice/03_07/script.js b/Practice/03_07/script.js
@@ -0,0 +1,10 @@
+/**
+ * Practice: Building functions
+ *
+ * - Create a basic function declaration - you’ll remember that’s where we say “function” followed by the name of the function.
+ * - In the body of the function declaration, do something to an element in the DOM. For this you can use any of the techniques we’ve covered earlier - finding an element using querySelector, adding a class, whatever you like.
+ * - Call the function declaration so the action takes place.
+ * - Create a basic function expression - that’s when you define a variable and place an anonymous function inside
+ * - Do the same as above - find an element, make a change to it, call the function, make sure it works.
+ * - Finally, create an arrow function, make it do something, and call it.
+ */
diff --git a/Practice/03_09 - making methods/index.html → Practice/03_09/index.html b/Practice/03_09 - making methods/index.html → Practice/03_09/index.html
diff --git a/Practice/03_09 - making methods/script.js → Practice/03_09/script.js b/Practice/03_09 - making methods/script.js → Practice/03_09/script.js
diff --git a/Practice/03_12/Backpack.js b/Practice/03_12/Backpack.js
@@ -0,0 +1,40 @@
+/**
+ * Creating classes:
+ *
+ * Class declaration: class Name {}
+ * Class expression:  const Name = class {}
+ */
+
+class Backpack {
+  constructor(
+    // Defines parameters:
+    name,
+    volume,
+    color,
+    pocketNum,
+    strapLengthL,
+    strapLengthR,
+    lidOpen
+  ) {
+    // Define properties:
+    this.name = name;
+    this.volume = volume;
+    this.color = color;
+    this.pocketNum = pocketNum;
+    this.strapLength = {
+      left: strapLengthL,
+      right: strapLengthR,
+    };
+    this.lidOpen = lidOpen;
+  }
+  // Add methods like normal functions:
+  toggleLid(lidStatus) {
+    this.lidOpen = lidStatus;
+  }
+  newStrapLength(lengthLeft, lengthRight) {
+    this.strapLength.left = lengthLeft;
+    this.strapLength.right = lengthRight;
+  }
+}
+
+export default Backpack;
diff --git a/Practice/03_12/index.html b/Practice/03_12/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <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="script.js"></script>
+  </head>
+  <body></body>
+</html>
diff --git a/Practice/03_12 - making classes/script.js → Practice/03_12/script.js b/Practice/03_12 - making classes/script.js → Practice/03_12/script.js
diff --git a/Practice/05_04/index.html b/Practice/05_04/index.html
@@ -0,0 +1,121 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BackpackPacker</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&amp;family=Work+Sans:[email protected]&amp;display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="../../assets/style.css"
+      type="text/css"
+      media="all"
+    />
+    <script type="module" src="./components/Backpack.js"></script>
+    <script type="module" src="./components/data.js"></script>
+    <script type="module" src="script.js"></script>
+  </head>
+  <body>
+    <header class="siteheader">
+      <div class="site-title">BackpackPacker</div>
+      <div class="site-description">All backpack packing, all the time.</div>
+    </header>
+    <main class="maincontent">
+      <div class="page-header">
+        <h2 class="page-header__heading">A pack for every purpose</h2>
+        <p>
+          If you're carrying a heavy load, you can't find a better tool than a
+          backpack. Distributing the weight evenly across your shoulders, back,
+          and hips, the backpack lets you use the natural frame of your body to
+          literally <em>shoulder</em> the weight while your legs do the
+          carrying.
+        </p>
+      </div>
+      <article class="backpack" id="pack01">
+        <figure class="backpack__image">
+          <img src="../../assets/images/everyday.svg" alt="" loading="lazy" />
+        </figure>
+        <h1 class="backpack__name">Everyday Backpack</h1>
+        <ul class="backpack__features">
+          <li class="feature backpack__volume">Volume:<span> 30l</span></li>
+          <li class="feature backpack__color">Color:<span> grey</span></li>
+          <li class="feature backpack__age">Age:<span> 684 days old</span></li>
+          <li class="feature backpack__pockets">
+            Number of pockets:<span> 15</span>
+          </li>
+          <li class="feature backpack__strap" data-side="left">
+            Left strap length: <span>26 inches</span>
+            <form class="leftlength" data-children-count="1">
+              <input
+                type="number"
+                name="leftLength"
+                placeholder="New left length"
+              />
+              <button>Update</button>
+            </form>
+          </li>
+          <li class="feature backpack__strap" data-side="right">
+            Right strap length: <span>26 inches</span>
+            <form class="rightlength" data-children-count="1">
+              <input
+                type="number"
+                name="rightLength"
+                placeholder="New right length"
+              />
+              <button>Update</button>
+            </form>
+          </li>
+          <li class="feature backpack__lid">Lid status: <span>closed</span></li>
+        </ul>
+        <button class="lid-toggle">Open lid</button>
+      </article>
+      <article class="backpack" id="pack02">
+        <figure class="backpack__image">
+          <img src="../../assets/images/frog.svg" alt="" loading="lazy" />
+        </figure>
+        <h1 class="backpack__name">Frog Backpack</h1>
+        <ul class="backpack__features">
+          <li class="feature backpack__volume">Volume:<span> 8l</span></li>
+          <li class="feature backpack__color">Color:<span> green</span></li>
+          <li class="feature backpack__age">Age:<span> 369 days old</span></li>
+          <li class="feature backpack__pockets">
+            Number of pockets:<span> 3</span>
+          </li>
+          <li class="feature backpack__strap" data-side="left">
+            Left strap length: <span>10 inches</span>
+            <form class="leftlength" data-children-count="1">
+              <input
+                type="number"
+                name="leftLength"
+                placeholder="New left length"
+              />
+              <button>Update</button>
+            </form>
+          </li>
+          <li class="feature backpack__strap" data-side="right">
+            Right strap length: <span>10 inches</span>
+            <form class="rightlength" data-children-count="1">
+              <input
+                type="number"
+                name="rightLength"
+                placeholder="New right length"
+              />
+              <button>Update</button>
+            </form>
+          </li>
+          <li class="feature backpack__lid">Lid status: <span>closed</span></li>
+        </ul>
+        <button class="lid-toggle">Open lid</button>
+      </article>
+    </main>
+    <footer class="sitefooter">
+      <p>
+        Demo project for JavaScript Essential Training, a LinkedIn Learning
+        course.
+      </p>
+    </footer>
+    <!-- Code injected by live-server -->
+  </body>
+</html>