Skip to content

Commit c3498bb

Browse files
JorisPaardeJorisPaarde
committed
aded renderer
1 parent 43bb0f4 commit c3498bb

File tree

9 files changed

+108
-22
lines changed

9 files changed

+108
-22
lines changed

‎public/app.js

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
import { Invoice } from "./classes/invoice.js";
2-
const invOne = new Invoice('joris', 32.25, 'Hele grote dinges.');
3-
const invTwo = new Invoice('melinda', 132.25, 'Grotere dinges.');
4-
const invoices = [];
5-
invoices.push(invOne, invTwo);
6-
invoices.forEach(inv => { console.log(inv.format()); });
2+
import { ListTemplate } from "./classes/listTemplate.js";
3+
import { Payment } from "./classes/payment.js";
74
const form = document.querySelector(".new-item-form");
5+
// inputs
86
const type = document.querySelector('#type');
97
const tofrom = document.querySelector('#tofrom');
108
const details = document.querySelector('#details');
119
const amount = document.querySelector('#amount');
10+
// list template instance
11+
const ul = document.querySelector("ul" + ".item-list");
12+
const list = new ListTemplate(ul);
1213
form.addEventListener('submit', (e) => {
1314
e.preventDefault();
14-
console.log(type.value);
15-
console.log(tofrom.value);
16-
console.log(details.value);
17-
console.log(amount.valueAsNumber);
15+
let doc;
16+
if (type.value == 'invoice') {
17+
doc = new Invoice(tofrom.value, amount.valueAsNumber, details.value);
18+
}
19+
else {
20+
doc = new Payment(tofrom.value, amount.valueAsNumber, details.value);
21+
}
22+
list.render(doc, type.value, "end");
1823
});

‎public/classes/listTemplate.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export class ListTemplate {
2+
constructor(container) {
3+
this.container = container;
4+
}
5+
render(item, heading, pos) {
6+
const li = document.createElement("li");
7+
const h4 = document.createElement('h4');
8+
h4.innerText = heading;
9+
li.append(h4);
10+
const p = document.createElement("p");
11+
p.innerText = item.format();
12+
li.append(p);
13+
if (pos === "start") {
14+
this.container.prepend(li);
15+
}
16+
else {
17+
this.container.append(li);
18+
}
19+
}
20+
}

‎public/classes/payment.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export class Payment {
2+
constructor(recipient, amount, details) {
3+
this.recipient = recipient;
4+
this.amount = amount;
5+
this.details = details;
6+
}
7+
format() {
8+
return `${this.recipient} is owed €${this.amount} for ${this.details}`;
9+
}
10+
}

‎public/interfaces/HasFormatter.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export {};

‎src/app.ts

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,31 @@
11
import { Invoice } from "./classes/invoice.js"
2+
import { ListTemplate } from "./classes/listTemplate.js";
3+
import { Payment } from "./classes/payment.js";
4+
import { HasFormatter } from "./interfaces/HasFormatter.js"
25

3-
const invOne = new Invoice('joris', 32.25, 'Hele grote dinges.')
4-
const invTwo = new Invoice('melinda', 132.25, 'Grotere dinges.')
5-
6-
const invoices: Invoice[] = []
7-
invoices.push(invOne, invTwo)
8-
9-
10-
invoices.forEach(inv => { console.log(inv.format()) })
116

127
const form = document.querySelector(".new-item-form") as HTMLFormElement
138

9+
// inputs
1410
const type = document.querySelector('#type') as HTMLSelectElement
1511
const tofrom = document.querySelector('#tofrom') as HTMLInputElement
1612
const details = document.querySelector('#details') as HTMLInputElement
1713
const amount = document.querySelector('#amount') as HTMLInputElement
1814

15+
// list template instance
16+
const ul = document.querySelector("ul" + ".item-list") as HTMLUListElement;
17+
const list = new ListTemplate(ul)
18+
1919
form.addEventListener('submit', (e: Event) => {
2020
e.preventDefault();
21-
console.log(type.value)
22-
console.log(tofrom.value)
23-
console.log(details.value)
24-
console.log(amount.valueAsNumber)
21+
22+
let doc : HasFormatter;
23+
24+
if (type.value == 'invoice'){
25+
doc = new Invoice( tofrom.value, amount.valueAsNumber, details.value )
26+
}else{
27+
doc = new Payment( tofrom.value, amount.valueAsNumber, details.value )
28+
}
29+
30+
list.render(doc, type.value, "end");
2531
});

‎src/classes/invoice.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
export class Invoice{
1+
import { HasFormatter } from "../interfaces/HasFormatter.js";
2+
3+
export class Invoice implements HasFormatter{
24

35
format(){
46
return `${this.client} owes €${this.amount} for ${this.details}`

‎src/classes/listTemplate.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { HasFormatter } from "../interfaces/HasFormatter.js";
2+
3+
export class ListTemplate {
4+
constructor(private container: HTMLUListElement) { }
5+
6+
render(item: HasFormatter, heading: string, pos: "start" | "end") {
7+
const li = document.createElement("li");
8+
9+
const h4 = document.createElement('h4');
10+
h4.innerText = heading;
11+
li.append(h4);
12+
13+
const p = document.createElement("p");
14+
p.innerText = item.format();
15+
li.append(p);
16+
17+
if (pos === "start") {
18+
this.container.prepend(li);
19+
} else {
20+
this.container.append(li);
21+
}
22+
}
23+
}

‎src/classes/payment.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
2+
import { HasFormatter } from "../interfaces/HasFormatter.js";
3+
4+
export class Payment implements HasFormatter{
5+
6+
format(){
7+
return `${this.recipient} is owed €${this.amount} for ${this.details}`
8+
}
9+
10+
constructor(
11+
readonly recipient: string,
12+
readonly amount: number,
13+
readonly details: string
14+
){
15+
}
16+
}

‎src/interfaces/HasFormatter.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export interface HasFormatter {
2+
format(): string;
3+
}

0 commit comments

Comments
 (0)