Add folder 01_06. Fixes #6 and #7

LinkedInLearning · Jul 21, 2021 · 4828e5f · WNJENGA · Oct 12, 2022 · 4828e5f
1 parent e111b53
commit 4828e5f
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 0 deletions.
diff --git a/01_06/index.html b/01_06/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Console demo</title>
+    <script src="script.js" defer></script>
+  </head>
+  <body></body>
+</html>
diff --git a/01_06/script.js b/01_06/script.js
@@ -0,0 +1,56 @@
+/**
+ * Create a Backpack object, populate some HTML to display its properties.
+ */
+
+// Single line comment
+
+/* Multi-line comment
+See! this line is also commented out! */
+
+const updateBackpack = (update) => {
+  let main = document.querySelector("main"); // main is an element
+  main.innerHTML = markup(backpack);
+  console.info(update);
+};
+
+const backpack = {
+  name: "Everyday Backpack",
+  volume: 30,
+  color: "grey",
+  pocketNum: 15,
+  strapLength: {
+    left: 26,
+    right: 26,
+  },
+  lidOpen: false,
+  toggleLid: function (lidStatus) {
+    this.lidOpen = lidStatus;
+    updateBackpack(`Lid status changed.`);
+  },
+  newStrapLength: function (lengthLeft, lengthRight) {
+    this.strapLength.left = lengthLeft;
+    this.strapLength.right = lengthRight;
+    updateBackpack(`Strap lengths updated.`);
+  },
+};
+
+const markup = (backpack) => {
+  return `
+  <div>
+	<h3>${backpack.name}</h3>
+	<ul>
+	  <li>Volume: ${backpack.volume}</li>
+	  <li>Color: ${backpack.color}</li>
+	  <li>Number of pockets: ${backpack.pocketNum}</li>
+	  <li>Strap lengths: L: ${backpack.strapLength.left}, R: ${
+    backpack.strapLength.right
+  } </li>
+	  <li>Top lid: ${backpack.lidOpen ? "Open" : "Closed"}</li>
+	</ul>
+  </div>
+`;
+};
+
+const main = document.createElement("main");
+main.innerHTML = markup(backpack);
+document.body.appendChild(main);