From af248dd498051bb811f49b484201db5a91c060e7 Mon Sep 17 00:00:00 2001
From: Nico Bakomihalis <nico.bakomihalis@ierustech.com>
Date: Fri, 25 Oct 2024 15:47:21 -0500
Subject: [PATCH] adding lists

---
 node-parents-children/app.js     | 29 ++++++++++++++++++++++++++---
 node-parents-children/index.html | 12 ++++++++++++
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/node-parents-children/app.js b/node-parents-children/app.js
index 87bc3dc..b1b4b9b 100644
--- a/node-parents-children/app.js
+++ b/node-parents-children/app.js
@@ -1,4 +1,4 @@
-function initGrist(){
+function initGrist() {
     grist.ready({ requiredAccess: 'read table', columns: ["node", "children", "parents"] });
     grist.onRecord(function (record) {
         console.log("record", record);
@@ -16,10 +16,33 @@ function initGrist(){
 
 }
 
-function renderPage(mapped){
+function renderPage(mapped) {
     const node = mapped.node;
     console.log("node", node);
-    document.getElementById("node").innerText = node;
+
+    const nodeElement = document.getElementById("node");
+    nodeElement.innerText = node;
+
+    const parentsElement = document.getElementById("parents");
+    const parents = mapped.parents;
+    renderList(parentsElement, parents);
+
+    const childrenElement = document.getElementById("children");
+    const children = mapped.children;
+    renderList(childrenElement, children);
+
+
+}
+
+function renderList(element, nodes){
+    clearList(element);
+    console.log(nodes);
 }
 
+function clearList(list) {
+    while (list.firstChild) {
+      list.removeChild(list.firstChild);
+    }
+  }
+
 document.addEventListener("DOMContentLoaded", initGrist);
diff --git a/node-parents-children/index.html b/node-parents-children/index.html
index 029b37a..c675881 100644
--- a/node-parents-children/index.html
+++ b/node-parents-children/index.html
@@ -12,6 +12,18 @@
     <main id="main">
         <div id="content">
             <p>Node: <span id="node">Node Placeholder</span></p>
+            <section>
+                <h2>Parents</h2>
+                <ul id="parents">
+                    <li>Parent placeholder should be deleted</li>
+                </ul>
+            </section>
+            <section>
+                <h2>Children</h2>
+                <ul id="children">
+                    <li>Child placeholder should be deleted</li>
+                </ul>
+            </section>
         </div>
     </main>
     <script src="./app.js"></script>