Initial commit for javascript assignment

d271191c · Soumya Sree Sridharala · d271191c · d271191c · d271191c · d271191c
Commit d271191c authored 3 years ago by Soumya Sree Sridharala
20 changed files
--- a/.DS_Store
+++ b/.DS_Store
--- a/03_14/Backpack.js
+++ b/03_14/Backpack.js
+class Backpack {
+  constructor(
+    name,
+    volume,
+    color,
+    pocketNum,
+    strapLengthL,
+    strapLengthR,
+    lidOpen,
+    dateAcquired
+  ) {
+    this.name = name;
+    this.volume = volume;
+    this.color = color;
+    this.pocketNum = pocketNum;
+    this.strapLength = {
+      left: strapLengthL,
+      right: strapLengthR,
+    };
+    this.lidOpen = lidOpen;
+    this.dateAcquired = dateAcquired;
+  }
+  toggleLid(lidStatus) {
+    this.lidOpen = lidStatus;
+  }
+  newStrapLength(lengthLeft, lengthRight) {
+    this.strapLength.left = lengthLeft;
+    this.strapLength.right = lengthRight;
+  }
+  backpackAge() {
+    let now = new Date();
+    let acquired = new Date(this.dateAcquired);
+    let elapsed = now - acquired; // elapsed time in milliseconds
+    let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24));
+    return daysSinceAcquired;
+  }
+}
+
+export default Backpack;
--- a/03_14/Book.js
+++ b/03_14/Book.js
+class Book {
+  constructor(name, author, color, pages, price) {
+    this.name = name;
+    this.author = author;
+    this.color = color;
+    this.pages = pages;
+    this.price = price;
+  }
+}
+
+export default Book;
--- a/03_14/bookscript.js
+++ b/03_14/bookscript.js
+/**
+ * Challenge: Create a new object type
+ *
+ * - Create a new object type "Book" using a class or an object constructor function.
+ * - Add at least 5 book objects.
+ */
+
+import Book from "./Book.js";
+
+const book = new Book(
+  "The Positive Thinking",
+  "George Thomas",
+  "grey",
+  150,
+  "$30"
+);
+
+console.log("The Book object:", book);
+console.log("The Book name:", book.name);
+console.log("The Book author:", book.author);
+console.log("The Book pages:", book.pages);
+console.log("The Book price:", book.price);
+//console.log("Time to read this book:", book.readingTime);
--- a/03_14/index.html
+++ b/03_14/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Challenge: Create a new object type</title>
+    <script type="module" src="Backpack.js"></script>
+    <script type="module" src="bookscript.js"></script>
+    <script type="module" src="script.js"></script>
+  </head>
+  <body></body>
+</html>
--- a/03_14/script.js
+++ b/03_14/script.js
+/**
+ * Challenge: Create a new object type
+ *
+ * - Create a new object type "Book" using a class or an object constructor function.
+ * - Add at least 5 book objects.
+ */
+
+import Backpack from "./Backpack.js";
+
+const everydayPack = new Backpack(
+  "Everyday Backpack",
+  30,
+  "grey",
+  15,
+  26,
+  26,
+  false,
+  "December 5, 2018 15:00:00 PST"
+);
+
+console.log("The everydayPack object:", everydayPack);
+console.log("The pocketNum value:", everydayPack.pocketNum);
+console.log("Days since aquired:", everydayPack.backpackAge());
+
+
--- a/05_10/Backpack.js
+++ b/05_10/Backpack.js
+class Backpack {
+  constructor(
+    name,
+    volume,
+    color,
+    pocketNum,
+    strapLengthL,
+    strapLengthR,
+    lidOpen,
+    dateAcquired,
+    image
+  ) {
+    this.name = name;
+    this.volume = volume;
+    this.color = color;
+    this.pocketNum = pocketNum;
+    this.strapLength = {
+      left: strapLengthL,
+      right: strapLengthR,
+    };
+    this.lidOpen = lidOpen;
+    this.dateAcquired = dateAcquired;
+    this.image = image;
+  }
+  toggleLid(lidStatus) {
+    this.lidOpen = lidStatus;
+  }
+  newStrapLength(lengthLeft, lengthRight) {
+    this.strapLength.left = lengthLeft;
+    this.strapLength.right = lengthRight;
+  }
+  backpackAge() {
+    let now = new Date();
+    let acquired = new Date(this.dateAcquired);
+    let elapsed = now - acquired; // elapsed time in milliseconds
+    let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24));
+    return daysSinceAcquired;
+  }
+}
+
+export default Backpack;
--- a/05_10/index.html
+++ b/05_10/index.html
+<!DOCTYPE html>
+<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:wght@200..700&family=Work+Sans:wght@100..900&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="../assets/style.css"
+      type="text/css"
+      media="all"
+    />
+
+    <style>
+      .main-navigation ul {
+        margin: 0;
+        padding: 3rem 0 0 0;
+        display: flex;
+        justify-content: center;
+        list-style-type: none;
+      }
+
+      .main-navigation ul a {
+        display: block;
+        padding: 0.5rem 1rem;
+        color: inherit;
+      }
+    </style>
+
+    <script type="module" src="Backpack.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>
+    </main>
+    <footer class="sitefooter">
+      <p>
+        Demo project for JavaScript Essential Training, a LinkedIn Learning
+        course.
+      </p>
+    </footer>
+  </body>
+</html>
--- a/05_10/script.js
+++ b/05_10/script.js
+/**
+ * Challenge: Add a new element
+ * - In JavaScript, create a new element to hold a navigation menu
+ * - Add an unordered list and a series of no less than five links to the list
+ * - Use single words like “home”, “about”, etc for the list items and set the src attribute to # for simplicity
+ * - Add the new navigation element to the DOM directly after the header
+ * - Write basic CSS and add classes as necessary to create a horizontal layout for the menu.
+ * - A tip: Use either display flex or display grid to create the horizontal menu.
+ */
+
+import Backpack from "./Backpack.js";
+
+const everydayPack = new Backpack(
+  "Everyday Backpack",
+  30,
+  "grey",
+  15,
+  26,
+  26,
+  false,
+  "December 5, 2018 15:00:00 PST",
+  "../assets/images/everyday.svg"
+);
+
+const content = `
+  
+    <figure class="backpack__image">
+      <img src=${everydayPack.image} alt="" />
+    </figure>
+    <h1 class="backpack__name">Everyday Backpack</h1>
+    <ul class="backpack__features">
+      <li class="packprop backpack__volume">Volume:<span> ${
+        everydayPack.volume
+      }l</span></li>
+      <li class="packprop backpack__color">Color:<span> ${
+        everydayPack.color
+      }</span></li>
+      <li class="backpack__age">Age:<span> ${everydayPack.backpackAge()} days old</span></li>
+      <li class="packprop backpack__pockets">Number of pockets:<span> ${
+        everydayPack.pocketNum
+      }</span></li>
+      <li class="packprop backpack__strap">Left strap length:<span> ${
+        everydayPack.strapLength.left
+      } inches</span></li>
+      <li class="packprop backpack__strap">Right strap length:<span> ${
+        everydayPack.strapLength.right
+      } inches</span></li>
+      <li class="packprop backpack__lid">Lid status:<span> ${
+        everydayPack.lidOpen
+      }</span></li>
+    </ul>
+  
+`;
+
+const main = document.querySelector(".maincontent");
+
+const newArticle = document.createElement("article");
+newArticle.classList.add("backpack");
+newArticle.setAttribute("id", "everyday");
+newArticle.innerHTML = content;
+
+main.append(newArticle);
+
+/**
+ * Add a navigation section to the DOM
+ */
+const naviContent = `
+ <li><a href="#">Home</a></li>
+ <li><a href="#">About</a></li>
+ <li><a href="#">News</a></li>
+ <li><a href="#">Others</a></li>
+ <li><a href="#">Contact</a></li>
+`;
+
+const mainNavEl = document.createElement("nav");
+mainNavEl.classList.add("main-navigation");
+const naviList = document.createElement("ul");
+naviList.innerHTML = naviContent;
+mainNavEl.append(naviList);
+
+document.querySelector(".siteheader").append(mainNavEl);
--- a/07_04/index.html
+++ b/07_04/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Build and modify and array (07_04)</title>
+    <script type="module" src="script.js"></script>
+  </head>
+  <body></body>
+</html>
--- a/07_04/script.js
+++ b/07_04/script.js
+const food = ["Bread", "Butter", "Jam", "Rice", "Milk", "Water"];
+
+console.log("The food Array:", food);
+
+food.pop();
+
+console.log("The food Array after removing last item:", food);
+
+food.unshift(food.pop());
+console.log("The last item in food[] is moved to first:", food);
+
+food.sort();
+
+console.log("The items in food[] is sorted alphabetically", food);
+
+console.log("Is Jam present in food[] :", food.includes("Jam"));
+
+function removeItem(itemName) {
+  var isRemoved = false;
+  for (var i = 0; i < food.length; i++) {
+    if (food[i] === itemName) {
+      food.splice(i, 1);
+      isRemoved = true;
+    }
+  }
+  return isRemoved;
+}
+
+const itemRemoved = removeItem("Milk");
+console.log(" Milk is about to be removed from food[]:" + itemRemoved);
+
+console.log("food[] after removing Milk:", food);
--- a/08_16/components/Backpack.js
+++ b/08_16/components/Backpack.js
+// Set up the Backpack class
+class Backpack {
+  constructor(
+    id,
+    name,
+    volume,
+    color,
+    pocketNum,
+    strapLengthL,
+    strapLengthR,
+    lidOpen,
+    dateAcquired,
+    image
+  ) {
+    this.id = id;
+    this.name = name;
+    this.volume = volume;
+    this.color = color;
+    this.pocketNum = pocketNum;
+    this.strapLength = {
+      left: strapLengthL,
+      right: strapLengthR,
+    };
+    this.lidOpen = lidOpen;
+    this.dateAcquired = dateAcquired;
+    this.image = image;
+  }
+  toggleLid(lidStatus) {
+    this.lidOpen = lidStatus;
+  }
+  newStrapLength(lengthLeft, lengthRight) {
+    this.strapLength.left = lengthLeft;
+    this.strapLength.right = lengthRight;
+  }
+  backpackAge() {
+    let now = new Date();
+    let acquired = new Date(this.dateAcquired);
+    let elapsed = now - acquired; // elapsed time in milliseconds
+    let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24));
+    return daysSinceAcquired;
+  }
+}
+
+// Export the Backpack class to be used by other files
+export default Backpack;
--- a/08_16/components/data.js
+++ b/08_16/components/data.js
+// Import the Backpack class so we can make new Backpack objects.
+import Backpack from "./Backpack.js";
+
+// Create new Backpack object
+const everydayPack = new Backpack(
+  "pack01",
+  "Everyday Backpack",
+  30,
+  "grey",
+  15,
+  26,
+  26,
+  false,
+  "December 5, 2018 15:00:00 PST",
+  "../assets/images/everyday.svg"
+);
+
+// Create new Backpack object
+const frogPack = new Backpack(
+  "pack02",
+  "Frog Backpack",
+  8,
+  "green",
+  3,
+  10,
+  10,
+  false,
+  "October 16, 2019 15:00:00 PST",
+  "../assets/images/frog.svg"
+);
+
+// Add Backpack objects into an array
+const backpackObjectArray = [everydayPack, frogPack];
+
+// Export the array to be used in other files
+export default backpackObjectArray;
--- a/08_16/index.html
+++ b/08_16/index.html
+<!DOCTYPE html>
+<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:wght@200..700&family=Work+Sans:wght@100..900&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>
+    </main>
+    <footer class="sitefooter">
+      <p>
+        Demo project for JavaScript Essential Training, a LinkedIn Learning
+        course.
+      </p>
+    </footer>
+  </body>
+</html>
--- a/08_16/script.js
+++ b/08_16/script.js
+/**
+ * Challenge: Create an advanced function.
+ * - Loop through backpackObjectArray to create an article with the class "backpack".
+ * - Give the article the ID of the current backpack object.
+ * - Set the inner HTML of the article to the existing HTML output provided in const content.
+ * - Append each backpack object to the <main> element.
+ */
+import backpackObjectArray from "./components/data.js";
+
+// 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);
+
+  backpackArticle.innerHTML = `
+    <figure class="backpack__image">
+      <img src=${backpack.image} alt="lazy" />
+    </figure>
+    <h1 class="backpack__name">${backpack.name}</h1>
+    <ul class="backpack__features">
+      <li class="packprop backpack__volume">Volume:<span> ${
+        backpack.volume
+      }l</span></li>
+      <li class="packprop backpack__color">Color:<span> ${
+        backpack.color
+      }</span></li>
+      <li class="backpack__age">Age:<span> ${backpack.backpackAge()} days old</span></li>
+      <li class="packprop backpack__pockets">Number of pockets:<span> ${
+        backpack.pocketNum
+      }</span></li>
+      <li class="packprop backpack__strap">Left strap length:<span> ${
+        backpack.strapLength.left
+      } inches</span></li>
+      <li class="packprop backpack__strap">Right strap length:<span> ${
+        backpack.strapLength.right
+      } inches</span></li>
+      <li class="feature backpack__lid">Lid status:<span> ${
+        backpack.lidOpen ? "open" : "closed"
+      }</span></li>
+    </ul>
+  
+`;
+
+  // Return the backpackArticle to the content array.
+  return backpackArticle;
+});
+
+const main = document.querySelector(".maincontent");
+
+content.forEach((backpack) => {
+  main.append(backpack);
+});
--- a/09_07/components/Backpack.js
+++ b/09_07/components/Backpack.js
+// Set up the Backpack class
+class Backpack {
+  constructor(
+    id,
+    name,
+    volume,
+    color,
+    pocketNum,
+    strapLengthL,
+    strapLengthR,
+    lidOpen,
+    dateAcquired,
+    image
+  ) {
+    this.id = id;
+    this.name = name;
+    this.volume = volume;
+    this.color = color;
+    this.pocketNum = pocketNum;
+    this.strapLength = {
+      left: strapLengthL,
+      right: strapLengthR,
+    };
+    this.lidOpen = lidOpen;
+    this.dateAcquired = dateAcquired;
+    this.image = image;
+  }
+  toggleLid(lidStatus) {
+    this.lidOpen = lidStatus;
+  }
+  newStrapLength(lengthLeft, lengthRight) {
+    this.strapLength.left = lengthLeft;
+    this.strapLength.right = lengthRight;
+  }
+  backpackAge() {
+    let now = new Date();
+    let acquired = new Date(this.dateAcquired);
+    let elapsed = now - acquired; // elapsed time in milliseconds
+    let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24));
+    return daysSinceAcquired;
+  }
+}
+
+// Export the Backpack class to be used by other files
+export default Backpack;
--- a/09_07/components/data.js
+++ b/09_07/components/data.js
+// Import the Backpack class so we can make new Backpack objects.
+import Backpack from "./Backpack.js";
+
+// Create new Backpack object
+const everydayPack = new Backpack(
+  "pack01",
+  "Everyday Backpack",
+  30,
+  "grey",
+  15,
+  26,
+  26,
+  false,
+  "December 5, 2018 15:00:00 PST",
+  "../assets/images/everyday.svg"
+);
+
+// Create new Backpack object
+const frogPack = new Backpack(
+  "pack02",
+  "Frog Backpack",
+  8,
+  "green",
+  3,
+  10,
+  10,
+  false,
+  "October 16, 2019 15:00:00 PST",
+  "../assets/images/frog.svg"
+);
+
+// Add Backpack objects into an array
+const backpackObjectArray = [everydayPack, frogPack];
+
+// Export the array to be used in other files
+export default backpackObjectArray;
--- a/09_07/index.html
+++ b/09_07/index.html
+<!DOCTYPE html>
+<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:wght@200..700&family=Work+Sans:wght@100..900&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>
+    </main>
+    <footer class="sitefooter">
+      <p>
+        Demo project for JavaScript Essential Training, a LinkedIn Learning
+        course.
+      </p>
+    </footer>
+  </body>
+</html>
--- a/09_07/script-advanced.js
+++ b/09_07/script-advanced.js
+/**
+ * Challenge: Create an event listener
+ * - 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.
+ */
+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);
+
+  // Find the current backpack object in backpackObjectArray
+  let backpackObject = backpackObjectArray.find(
+    ({ id }) => id === button.parentElement.id
+  );
+
+  // Toggle lidOpen status
+  backpackObject.lidOpen == true
+    ? (backpackObject.lidOpen = false)
+    : (backpackObject.lidOpen = true);
+
+  // Toggle button text
+  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);
+
+  backpackArticle.innerHTML = `
+    <figure class="backpack__image">
+      <img src=${backpack.image} alt="" loading="lazy" />
+    </figure>
+    <h1 class="backpack__name">${backpack.name}</h1>
+    <ul class="backpack__features">
+      <li class="feature backpack__volume">Volume:<span> ${
+        backpack.volume
+      }l</span></li>
+      <li class="feature backpack__color">Color:<span> ${
+        backpack.color
+      }</span></li>
+      <li class="feature backpack__age">Age:<span> ${backpack.backpackAge()} days old</span></li>
+      <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>${
+        backpack.strapLength.left
+      } inches</span></li>
+      <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>${
+        backpack.lidOpen ? "open" : "closed"
+      }</span></li>
+    </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!";
+
+  // Add event listener
+  button.addEventListener("click", (event) => {
+    lidToggle(event, button, newArg);
+  });
+
+  return backpackArticle;
+});
+
+// Append each backpack item to the main
+const main = document.querySelector(".maincontent");
+
+backpackList.forEach((backpack) => {
+  main.append(backpack);
+});
--- a/09_07/script.js
+++ b/09_07/script.js
+/**
+ * Challenge: Create an event listener
+ * - Add event listener to each of the strap length forms.
+ * - Update strap length value with value submitted from form.
+ */
+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);
+
+  // Find the current backpack object in backpackObjectArray
+  let backpackObject = backpackObjectArray.find(
+    ({ id }) => id === button.parentElement.id
+  );
+
+  // Toggle lidOpen status
+  backpackObject.lidOpen == true
+    ? (backpackObject.lidOpen = false)
+    : (backpackObject.lidOpen = true);
+
+  // Toggle button text
+  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");
+};
+
+/**
+ * Strap length functionality
+ */
+const newStrapLength = (strapArray) => {
+  // Loop through each element on the list
+  strapArray.forEach((listElement) => {
+    // Get what side we are working with
+    let side = listElement.getAttribute("data-side");
+
+    // Create a new form element
+    const lengthForm = document.createElement("form");
+    lengthForm.classList.add(`${side}length`);
+
+    // Populate form with an input and a button
+    lengthForm.innerHTML = `
+      <input type="number" name="${side}Length" placeholder="New ${side} length">
+      <button>Update</button>
+    `;
+
+    // Add event listener to the form submit action
+    lengthForm.addEventListener("submit", (e) => {
+      // Stop form from reloading the page
+      e.preventDefault();
+
+      // Get the value from the form input
+      let newValue = lengthForm.querySelector("input").value;
+
+      // Set the value of the field
+      listElement.querySelector("span").innerHTML = `${newValue} inches`;
+
+      // Clear the form input
+      lengthForm.querySelector("input").value = "";
+    });
+
+    // Add form to the end of the list element
+    listElement.append(lengthForm);
+  });
+};
+
+const backpackList = backpackObjectArray.map((backpack) => {
+  let backpackArticle = document.createElement("article");
+  backpackArticle.classList.add("backpack");
+  backpackArticle.setAttribute("id", backpack.id);
+
+  backpackArticle.innerHTML = `
+    <figure class="backpack__image">
+      <img src=${backpack.image} alt="" loading="lazy" />
+    </figure>
+    <h1 class="backpack__name">${backpack.name}</h1>
+    <ul class="backpack__features">
+      <li class="feature backpack__volume">Volume:<span> ${
+        backpack.volume
+      }l</span></li>
+      <li class="feature backpack__color">Color:<span> ${
+        backpack.color
+      }</span></li>
+      <li class="feature backpack__age">Age:<span> ${backpack.backpackAge()} days old</span></li>
+      <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>${
+        backpack.strapLength.left
+      } inches</span></li>
+      <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>${
+        backpack.lidOpen ? "open" : "closed"
+      }</span></li>
+    </ul>
+    <button class="lid-toggle">Open lid</button>
+  `;
+
+  let strapLengths = backpackArticle.querySelectorAll(".backpack__strap");
+  newStrapLength(strapLengths);
+
+  let button = backpackArticle.querySelector(".lid-toggle");
+  let newArg = "The argument I want to pass to the callback function!";
+
+  // Add event listener
+  button.addEventListener("click", (event) => {
+    lidToggle(event, button, newArg);
+  });
+
+  return backpackArticle;
+});
+
+// Append each backpack item to the main
+const main = document.querySelector(".maincontent");
+
+backpackList.forEach((backpack) => {
+  main.append(backpack);
+});