lesson-17

iamshaunjp · iamshaunjp · commit 05cb586272a6 · 2020-03-17T14:01:02.000Z
diff --git a/public/app.js b/public/app.js
@@ -1,19 +1,16 @@
 import { Invoice } from './classes/Invoice.js';
 import { Payment } from './classes/Payment.js';
-// let docOne: HasFormatter;
-// let docTwo: HasFormatter;
-// docOne = new Invoice('yoshi', 'web work', 250);
-// docTwo = new Payment('mario', 'plumbing', 200);
-// let docs: HasFormatter[] = [];
-// docs.push(docOne);
-// docs.push(docTwo);
+import { ListTemplate } from './classes/ListTemplate.js';
 const form = document.querySelector('.new-item-form');
 console.log(form.children);
 // inputs
 const type = document.querySelector('#type');
 const tofrom = document.querySelector('#tofrom');
 const details = document.querySelector('#details');
 const amount = document.querySelector('#amount');
+// list template instance
+const ul = document.querySelector('ul');
+const list = new ListTemplate(ul);
 form.addEventListener('submit', (e) => {
     e.preventDefault();
     let doc;
@@ -23,5 +20,5 @@ form.addEventListener('submit', (e) => {
     else {
         doc = new Payment(tofrom.value, details.value, amount.valueAsNumber);
     }
-    console.log(doc);
+    list.render(doc, type.value, 'end');
 });
diff --git a/public/classes/ListTemplate.js b/public/classes/ListTemplate.js
@@ -0,0 +1,20 @@
+export class ListTemplate {
+    constructor(container) {
+        this.container = container;
+    }
+    render(item, heading, pos) {
+        const li = document.createElement('li');
+        const h4 = document.createElement('h4');
+        h4.innerText = heading;
+        li.append(h4);
+        const p = document.createElement('p');
+        p.innerText = item.format();
+        li.append(p);
+        if (pos === 'start') {
+            this.container.prepend(li);
+        }
+        else {
+            this.container.append(li);
+        }
+    }
+}
diff --git a/public/classes/RenderList.js b/public/classes/RenderList.js
@@ -0,0 +1,20 @@
+export class ListTemplate {
+    constructor(container) {
+        this.container = container;
+    }
+    render(item, heading, pos) {
+        const li = document.createElement('li');
+        const h4 = document.createElement('h4');
+        h4.innerText = heading;
+        li.append(h4);
+        const p = document.createElement('p');
+        p.innerText = item.format();
+        li.append(p);
+        if (pos === 'start') {
+            this.container.prepend(li);
+        }
+        else {
+            this.container.append(li);
+        }
+    }
+}
diff --git a/src/app.ts b/src/app.ts
@@ -1,17 +1,8 @@
 import { Invoice } from './classes/Invoice.js';
 import { Payment } from './classes/Payment.js';
+import { ListTemplate } from './classes/ListTemplate.js';
 import { HasFormatter } from './interfaces/HasFormatter.js';
 
-// let docOne: HasFormatter;
-// let docTwo: HasFormatter;
-
-// docOne = new Invoice('yoshi', 'web work', 250);
-// docTwo = new Payment('mario', 'plumbing', 200);
-
-// let docs: HasFormatter[] = [];
-// docs.push(docOne);
-// docs.push(docTwo);
-
 const form = document.querySelector('.new-item-form') as HTMLFormElement;
 console.log(form.children);
 
@@ -21,6 +12,10 @@ const tofrom = document.querySelector('#tofrom') as HTMLInputElement;
 const details = document.querySelector('#details') as HTMLInputElement;
 const amount = document.querySelector('#amount') as HTMLInputElement;
 
+// list template instance
+const ul = document.querySelector('ul')!;
+const list = new ListTemplate(ul);
+
 form.addEventListener('submit', (e: Event) => {
   e.preventDefault();
 
@@ -30,5 +25,6 @@ form.addEventListener('submit', (e: Event) => {
   } else {
     doc = new Payment(tofrom.value, details.value, amount.valueAsNumber);
   }
-  console.log(doc);
+  
+  list.render(doc, type.value, 'end');
 });
diff --git a/src/classes/ListTemplate.ts b/src/classes/ListTemplate.ts
@@ -0,0 +1,23 @@
+import { HasFormatter } from "../interfaces/HasFormatter";
+
+export class ListTemplate {
+  constructor(private container: HTMLUListElement){}
+
+  render(item: HasFormatter, heading: string, pos: 'start' | 'end'){
+    const li = document.createElement('li');
+  
+    const h4 = document.createElement('h4');
+    h4.innerText = heading;
+    li.append(h4);
+
+    const p = document.createElement('p');
+    p.innerText = item.format();
+    li.append(p);
+
+    if(pos === 'start'){
+      this.container.prepend(li);
+    } else {
+      this.container.append(li);
+    }
+  }
+}
