Skip to content

Commit 9255db3

Browse files
evariste1963evariste1963
committed
up to lesson18
1 parent 6560de8 commit 9255db3

File tree

14 files changed

+249
-49
lines changed

14 files changed

+249
-49
lines changed

‎public/app.js

Lines changed: 52 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,62 @@
1-
"use strict";
2-
class Invoice {
3-
//cpnstructor
4-
constructor(c, d, a) {
5-
this.client = c;
6-
this.details = d;
7-
this.amount = a;
8-
}
9-
//methhod
10-
format() {
11-
return `${this.client} owes £${this.amount} for ${this.details}`;
12-
}
13-
}
14-
const invOne = new Invoice('mario', 'work on the mario website', 250);
15-
const invTwo = new Invoice('luigi', 'work on the luigi website', 200);
16-
let invoices = [];
17-
invoices.push(invOne);
18-
invoices.push(invTwo);
19-
console.log(invoices);
1+
// //interfaces
2+
// interface IsPerson {
3+
// name: string;
4+
// age: number;
5+
// speak(a: string): void;
6+
// spend(a: number): number;
7+
// }
8+
// const me: IsPerson = {
9+
// name: 'evariste',
10+
// age: 50,
11+
// speak(text: string): void {
12+
// console.log(text);
13+
// },
14+
// spend(amount: number): number {
15+
// console.log(`I spent, ${amount}`);
16+
// return amount
17+
// }
18+
// }
19+
// console.log(`Hi, my name is ${me.name} and I am ${me.age} years old`);
20+
// const greetPerson = (person: IsPerson) => {
21+
// console.log('hello', person.name);
22+
// }
23+
// greetPerson(me)
24+
import { Invoice } from "./classes/Invoice.js";
25+
import { ListTemplate } from "./classes/ListTemplate.js";
26+
import { Payment } from "./classes/Payment.js";
27+
// let docOne: HasFormatter;
28+
// let docTwo: HasFormatter;
29+
// docOne = new Invoice('joshi', 'work on website', 250)
30+
// docTwo = new Payment('mario', 'plumbing work', 200)
31+
// let docs: HasFormatter[] = [];
32+
// docs.push(docOne)
33+
// docs.push(docTwo)
34+
// console.log(docs);
35+
// const invOne = new Invoice('mario', 'work on the mario website', 250)
36+
// const invTwo = new Invoice('luigi', 'work on the luigi website', 200)
37+
// let invoices: Invoice[] = [];
38+
// invoices.push(invOne)
39+
// invoices.push(invTwo)
40+
// invoices.forEach(inv => {
41+
// console.log(inv.client, inv.amount, inv.format());
42+
// })
2043
const form = document.querySelector('.new-item-form');
2144
//console.log(form.children);
2245
//inputs
2346
const type = document.querySelector('#type');
2447
const tofrom = document.querySelector('#tofrom');
2548
const details = document.querySelector('#details');
2649
const amount = document.querySelector('#amount');
50+
//list template instance
51+
const ul = document.querySelector('ul');
52+
const list = new ListTemplate(ul);
2753
form.addEventListener('submit', (e) => {
2854
e.preventDefault();
29-
console.log(type.value, tofrom.value, details.value, amount.valueAsNumber);
55+
let doc;
56+
if (type.value === 'Invoice') {
57+
doc = new Invoice(tofrom.value, details.value, amount.valueAsNumber);
58+
}
59+
else
60+
doc = new Payment(tofrom.value, details.value, amount.valueAsNumber);
61+
list.render(doc, type.value, 'start');
3062
});

‎public/classes/Invoice.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export class Invoice {
2+
//cpnstructor
3+
constructor(client, details, amount) {
4+
this.client = client;
5+
this.details = details;
6+
this.amount = amount;
7+
}
8+
//methhod
9+
format() {
10+
return `${this.client} owes £${this.amount} for ${this.details}`;
11+
}
12+
}

‎public/classes/Invoices.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export class Invoice {
2+
//cpnstructor
3+
constructor(client, details, amount) {
4+
this.client = client;
5+
this.details = details;
6+
this.amount = amount;
7+
}
8+
//methhod
9+
format() {
10+
return `${this.client} owes £${this.amount} for ${this.details}`;
11+
}
12+
}

‎public/classes/ListTemplate.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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+
}

‎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, details, amount) {
3+
this.recipient = recipient;
4+
this.details = details;
5+
this.amount = amount;
6+
}
7+
format() {
8+
return `${this.recipient} is owed £${this.amount} for ${this.details}`;
9+
}
10+
}

‎public/classes/Payments.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, details, amount) {
3+
this.recipient = recipient;
4+
this.details = details;
5+
this.amount = amount;
6+
}
7+
format() {
8+
return `${this.recipient} is owed £${this.amount} for ${this.details}`;
9+
}
10+
}

‎public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,6 @@ <h1>Finance Logger</h1>
4343
<a href="https://www.thenetninja.co.uk">The Net Ninja</a>
4444
</footer>
4545

46-
<script src='app.js'></script>
46+
<script type="module" src='app.js'></script>
4747
</body>
4848
</html>

‎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: 76 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,68 @@
1-
class Invoice{
2-
client:string;
3-
details: string;
4-
amount: number;
5-
//cpnstructor
6-
constructor(c: string, d: string, a: number){
7-
this.client = c;
8-
this.details = d;
9-
this.amount = a
10-
}
11-
//methhod
12-
format(){
13-
return `${this.client} owes £${this.amount} for ${this.details}`
14-
}
15-
}
16-
17-
const invOne = new Invoice('mario', 'work on the mario website', 250)
18-
const invTwo = new Invoice('luigi', 'work on the luigi website', 200)
19-
20-
let invoices: Invoice[] = [];
21-
invoices.push(invOne)
22-
invoices.push(invTwo)
23-
24-
console.log(invoices);
1+
// //interfaces
2+
// interface IsPerson {
3+
// name: string;
4+
// age: number;
5+
// speak(a: string): void;
6+
// spend(a: number): number;
7+
// }
8+
9+
// const me: IsPerson = {
10+
// name: 'evariste',
11+
// age: 50,
12+
// speak(text: string): void {
13+
// console.log(text);
14+
// },
15+
// spend(amount: number): number {
16+
// console.log(`I spent, ${amount}`);
17+
// return amount
18+
// }
19+
20+
// }
21+
22+
// console.log(`Hi, my name is ${me.name} and I am ${me.age} years old`);
23+
24+
25+
// const greetPerson = (person: IsPerson) => {
26+
// console.log('hello', person.name);
27+
28+
// }
29+
30+
// greetPerson(me)
31+
32+
import { Invoice} from "./classes/Invoice.js";
33+
import { ListTemplate } from "./classes/ListTemplate.js";
34+
import { Payment} from "./classes/Payment.js";
35+
import { HasFormatter} from "./interfaces/HasFormatter.js"
36+
37+
// let docOne: HasFormatter;
38+
// let docTwo: HasFormatter;
39+
40+
// docOne = new Invoice('joshi', 'work on website', 250)
41+
// docTwo = new Payment('mario', 'plumbing work', 200)
42+
43+
44+
// let docs: HasFormatter[] = [];
45+
// docs.push(docOne)
46+
// docs.push(docTwo)
47+
48+
// console.log(docs);
49+
50+
51+
52+
53+
// const invOne = new Invoice('mario', 'work on the mario website', 250)
54+
// const invTwo = new Invoice('luigi', 'work on the luigi website', 200)
55+
56+
// let invoices: Invoice[] = [];
57+
// invoices.push(invOne)
58+
// invoices.push(invTwo)
59+
60+
// invoices.forEach(inv => {
61+
// console.log(inv.client, inv.amount, inv.format());
62+
63+
// })
64+
65+
2566

2667

2768
const form = document.querySelector('.new-item-form') as HTMLFormElement
@@ -36,9 +77,18 @@ const tofrom = document.querySelector('#tofrom') as HTMLInputElement;
3677
const details = document.querySelector('#details') as HTMLInputElement;
3778
const amount = document.querySelector('#amount') as HTMLInputElement;
3879

80+
//list template instance
81+
82+
const ul = document.querySelector('ul')!;
83+
const list = new ListTemplate(ul)
84+
3985
form.addEventListener('submit', (e:Event) => {
4086
e.preventDefault()
4187

42-
console.log(type.value, tofrom.value, details.value, amount.valueAsNumber);
43-
88+
let doc: HasFormatter;
89+
if(type.value === 'Invoice'){
90+
doc = new Invoice(tofrom.value, details.value, amount.valueAsNumber)
91+
} else doc = new Payment(tofrom.value, details.value, amount.valueAsNumber)
92+
93+
list.render(doc, type.value, 'start')
4494
})

‎src/classes/Invoice.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { HasFormatter } from '../interfaces/HasFormatter.js'
2+
3+
export class Invoice implements HasFormatter{
4+
5+
//cpnstructor
6+
constructor(
7+
readonly client: string,
8+
private details: string,
9+
public amount: number,
10+
){}
11+
//methhod
12+
format(){
13+
return `${this.client} owes £${this.amount} for ${this.details}`
14+
}
15+
}

‎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+
14+
const p = document.createElement('p');
15+
p.innerText = item.format();
16+
17+
li.append(p)
18+
19+
if(pos === 'start'){
20+
this.container.prepend(li)
21+
} else this.container.append(li)
22+
}
23+
}

‎src/classes/Payment.ts

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

‎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+
}

‎tsconfig.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
1212

1313
/* Language and Environment */
14-
"target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
14+
"target": "ES6", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
1515
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
1616
// "jsx": "preserve", /* Specify what JSX code is generated. */
1717
// "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
@@ -25,7 +25,7 @@
2525
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
2626

2727
/* Modules */
28-
"module": "commonjs", /* Specify what module code is generated. */
28+
"module": "ES2015", /* Specify what module code is generated. */
2929
"rootDir": "./src", /* Specify the root folder within your source files. */
3030
// "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
3131
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */

0 commit comments

Comments
 (0)