class : list binding exercise

saidali-ibn-zafar · web-flow · commit 150ac249a32f · 2024-03-03T04:17:54.000-07:00
diff --git a/practice/class-ListBinding/app.js b/practice/class-ListBinding/app.js
@@ -0,0 +1,38 @@
+class ListBinding {
+  constructor(element) {
+    this.listElement = element;
+    this.textList = [];
+  }
+
+  // Make an <li>text</li> element/tag
+  static createListItem(text) {
+    const li = document.createElement("li");
+    li.textContent = text;
+    return li;
+  }
+
+  update() {
+    // Remove all existing <li> elements/tags
+    while (this.listElement.firstChild) {
+      this.listElement.removeChild(this.listElement.firstChild);
+    }
+
+    // Fill <ul>/<ol> tag with <li>
+    for (const text of this.textList) {
+      this.listElement.appendChild(ListBinding.createListItem(text));
+    }
+  }
+
+  add(text) {
+    this.textList.push(text);
+    this.update();
+  }
+
+  remove(index) {
+    this.textList.splice(index, 1);
+    this.update();
+  }
+}
+
+const myList = document.getElementById("myList");
+const listBinding = new ListBinding(myList);
diff --git a/practice/class-ListBinding/index.html b/practice/class-ListBinding/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Classes: HTML List Binding - JS</title>
+  </head>
+  <body>
+    <h2 id="title">Classes: HTML List Binding</h2>
+    <ul id="myList">
+      <!-- to be filled by JS -->
+    </ul>
+
+    <script src="app.js"></script>
+  </body>
+</html>
