Skip to content

Commit 56acf25

Browse files
AnthoniaEfeAnthoniaEfe
committed
lesson 17
1 parent d034494 commit 56acf25

File tree

8 files changed

+170
-56
lines changed

8 files changed

+170
-56
lines changed

‎public/app.js

Lines changed: 53 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,63 @@
11
//imports
22
import { Invoice } from './classes/invoice.js';
3+
import { Payment } from './classes/payment.js';
34
const form = document.querySelector(".new-item-form");
4-
//classes
5-
const invOne = new Invoice("Tonia", "web design work", 349, 25);
6-
const invTwo = new Invoice("Yosola", "iftar cooking", 200, 27);
7-
let invoices = [];
8-
invoices.push(invOne);
9-
invoices.push(invTwo);
10-
invoices.forEach(inv => {
11-
console.log(inv.client, inv.amount, inv.format());
12-
});
13-
//shorthand when using access modifiers
14-
class Money {
15-
constructor(client, details, amount) {
16-
this.client = client;
17-
this.details = details;
18-
this.amount = amount;
19-
}
20-
}
21-
//inputs
225
const type = document.querySelector("#type");
236
const tofrom = document.querySelector("#tofrom");
247
const details = document.querySelector("#details");
258
const amount = document.querySelector("#amount");
9+
// //classes
10+
// const invOne = new Invoice("Tonia", "web design work", 349, 25);
11+
// const invTwo = new Invoice("Yosola", "iftar cooking", 200, 27);
12+
// let invoices: Invoice[] =[];
13+
// invoices.push(invOne)
14+
// invoices.push(invTwo)
15+
// invoices.forEach(inv=>{
16+
// console.log(inv.client, inv.amount, inv.format());
17+
// })
18+
// //shorthand when using access modifiers
19+
// class Money{
20+
// constructor(
21+
// readonly client:string,
22+
// private details: string,
23+
// public amount: number,
24+
// ){}
25+
// }
2626
form.addEventListener('submit', (e) => {
2727
e.preventDefault();
28-
console.log(type.value, tofrom.value, details.value, amount.valueAsNumber);
28+
let doc;
29+
if (type.value == "invoice") {
30+
doc = new Invoice(tofrom.value, details.value, amount.valueAsNumber);
31+
}
32+
else {
33+
doc = new Payment(tofrom.value, details.value, amount.valueAsNumber);
34+
}
35+
console.log(doc);
2936
});
37+
// //interfaces
38+
// interface IsPerson {
39+
// name:string;
40+
// age: number;
41+
// speak(a:string):void;
42+
// spend(a:number):number;
43+
// }
44+
// const friend: IsPerson={name:"tonia",
45+
// age: 12,
46+
// speak(lang:string):void{
47+
// console.log(`speaks ${lang}`);
48+
// },
49+
// spend(amount:number):number{
50+
// return amount
51+
// }}
52+
// const greetPerson = (person: IsPerson)=>{
53+
// console.log(`hello, ${person.name}`);
54+
// }
55+
// greetPerson(friend)
56+
// let docOne:HasFormatter;
57+
// let docTwo: HasFormatter;
58+
// docOne = new Invoice("tonia", "web design", 300, 20);
59+
// docTwo = new Payments("sara", "graphic design", 270, 40);
60+
// let docs: HasFormatter[] = [];
61+
// docs.push(docOne)
62+
// docs.push(docTwo)
63+
// console.log(docs)

‎public/classes/invoice.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
export class Invoice {
2-
constructor(c, d, a, ag) {
2+
// protected age: number;
3+
constructor(c, d, a) {
34
this.client = c;
45
this.details = d;
56
this.amount = a;
6-
this.age = ag;
7+
// this.age = ag;
78
}
89
format() {
9-
return `${this.client} is ${this.age}y/o and owes $${this.amount} for ${this.details}`;
10+
// return `${this.client} is ${this.age}y/o and owes $${this.amount} for ${this.details}`
11+
return `${this.client} owes $${this.amount} for ${this.details}`;
1012
}
1113
}

‎public/classes/payment.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export class Payment {
2+
// protected age: number;
3+
constructor(c, d, a) {
4+
this.recipient = c;
5+
this.details = d;
6+
this.amount = a;
7+
// this.age = ag;
8+
}
9+
format() {
10+
// return `${this.recipient} is ${this.age}y/o and is owed $${this.amount} for ${this.details}`
11+
return `${this.recipient} is owed $${this.amount} for ${this.details}`;
12+
}
13+
}

‎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: 66 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,79 @@
11
//imports
22
import {Invoice } from './classes/invoice.js';
3+
import {Payment } from './classes/payment.js';
4+
import {HasFormatter} from "./interfaces/hasFormatter.js"
35

46
const form = document.querySelector(".new-item-form")! as HTMLFormElement;
7+
const type = document.querySelector("#type")! as HTMLSelectElement;
8+
const tofrom = document.querySelector("#tofrom")! as HTMLInputElement;
9+
const details = document.querySelector("#details")! as HTMLInputElement;
10+
const amount = document.querySelector("#amount")! as HTMLInputElement;
511

6-
//classes
12+
// //classes
13+
// const invOne = new Invoice("Tonia", "web design work", 349, 25);
14+
// const invTwo = new Invoice("Yosola", "iftar cooking", 200, 27);
715

16+
// let invoices: Invoice[] =[];
17+
// invoices.push(invOne)
18+
// invoices.push(invTwo)
19+
// invoices.forEach(inv=>{
20+
21+
// console.log(inv.client, inv.amount, inv.format());
22+
// })
823

9-
const invOne = new Invoice("Tonia", "web design work", 349, 25);
10-
const invTwo = new Invoice("Yosola", "iftar cooking", 200, 27);
24+
// //shorthand when using access modifiers
25+
// class Money{
26+
// constructor(
27+
// readonly client:string,
28+
// private details: string,
29+
// public amount: number,
30+
// ){}
31+
// }
1132

12-
let invoices: Invoice[] =[];
13-
invoices.push(invOne)
14-
invoices.push(invTwo)
15-
invoices.forEach(inv=>{
33+
form.addEventListener('submit', (e)=>{
34+
e.preventDefault()
1635

17-
console.log(inv.client, inv.amount, inv.format());
36+
let doc: HasFormatter;
37+
if(type.value == "invoice"){
38+
doc = new Invoice( tofrom.value, details.value, amount.valueAsNumber)
39+
}else{
40+
doc = new Payment( tofrom.value, details.value, amount.valueAsNumber)
41+
}
42+
43+
console.log(doc);
1844
})
1945

20-
//shorthand when using access modifiers
21-
class Money{
22-
constructor(
23-
readonly client:string,
24-
private details: string,
25-
public amount: number,
26-
){}
27-
}
46+
// //interfaces
47+
// interface IsPerson {
48+
// name:string;
49+
// age: number;
50+
// speak(a:string):void;
51+
// spend(a:number):number;
52+
// }
2853

54+
// const friend: IsPerson={name:"tonia",
55+
// age: 12,
56+
// speak(lang:string):void{
57+
// console.log(`speaks ${lang}`);
58+
// },
59+
// spend(amount:number):number{
60+
// return amount
61+
// }}
2962

30-
//inputs
31-
const type = document.querySelector("#type")! as HTMLSelectElement;
32-
const tofrom = document.querySelector("#tofrom")! as HTMLInputElement;
33-
const details = document.querySelector("#details")! as HTMLInputElement;
34-
const amount = document.querySelector("#amount")! as HTMLInputElement;
35-
36-
form.addEventListener('submit', (e)=>{
37-
e.preventDefault()
38-
console.log(type.value,
39-
tofrom.value,
40-
details.value,
41-
amount.valueAsNumber);
42-
})
63+
// const greetPerson = (person: IsPerson)=>{
64+
// console.log(`hello, ${person.name}`);
65+
// }
66+
67+
// greetPerson(friend)
68+
69+
70+
// let docOne:HasFormatter;
71+
// let docTwo: HasFormatter;
72+
// docOne = new Invoice("tonia", "web design", 300, 20);
73+
// docTwo = new Payments("sara", "graphic design", 270, 40);
74+
75+
// let docs: HasFormatter[] = [];
76+
// docs.push(docOne)
77+
// docs.push(docTwo)
78+
79+
// console.log(docs)

‎src/classes/invoice.ts

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
1-
export class Invoice{
1+
import {HasFormatter} from "../interfaces/hasFormatter.js"
2+
3+
export class Invoice implements HasFormatter{
24
readonly client: string;
35
private details: string;
46
public amount: number;
5-
protected age: number;
7+
// protected age: number;
68

7-
constructor(c: string, d: string, a: number, ag: number){
9+
constructor(c: string, d: string, a: number){
810
this.client = c;
911
this.details = d;
1012
this.amount = a;
11-
this.age = ag;
13+
// this.age = ag;
1214
}
1315

1416
format(){
15-
return `${this.client} is ${this.age}y/o and owes $${this.amount} for ${this.details}`
17+
// return `${this.client} is ${this.age}y/o and owes $${this.amount} for ${this.details}`
18+
return `${this.client} owes $${this.amount} for ${this.details}`
1619
}
1720
}
1821

‎src/classes/payment.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import {HasFormatter} from "../interfaces/hasFormatter"
2+
3+
export class Payment implements HasFormatter{
4+
readonly recipient: string;
5+
private details: string;
6+
public amount: number;
7+
// protected age: number;
8+
9+
constructor(c: string, d: string, a: number){
10+
this.recipient = c;
11+
this.details = d;
12+
this.amount = a;
13+
// this.age = ag;
14+
}
15+
16+
format(){
17+
// return `${this.recipient} is ${this.age}y/o and is owed $${this.amount} for ${this.details}`
18+
return `${this.recipient} is owed $${this.amount} for ${this.details}`
19+
}
20+
}
21+

‎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)