Skip to content

Commit ebafbfb

Browse files
Samuel-Datubo-JajaSamuel-Datubo-Jaja
committed
Added classes and interfaces for typescript development
1 parent bff7ec0 commit ebafbfb

File tree

8 files changed

+196
-0
lines changed

8 files changed

+196
-0
lines changed

‎public/index.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<title>TypeScript Tutorial</title>
6+
<link rel="stylesheet" href="styles.css">
7+
</head>
8+
<body>
9+
10+
<div class="wrapper">
11+
<h1>Finance Logger</h1>
12+
13+
<!-- output list -->
14+
<ul class="item-list">
15+
16+
</ul>
17+
</div>
18+
19+
<footer>
20+
<form class="new-item-form">
21+
<div class="field">
22+
<label>Type:</label>
23+
<select id="type">
24+
<option value="invoice">Invoice</option>
25+
<option value="payment">Payment</option>
26+
</select>
27+
</div>
28+
<div class="field">
29+
<label>To / From:</label>
30+
<input type="text" id="tofrom">
31+
</div>
32+
<div class="field">
33+
<label>Details:</label>
34+
<input type="text" id="details">
35+
</div>
36+
<div class="field">
37+
<label>Amount (£):</label>
38+
<input type="number" id="amount">
39+
</div>
40+
<button>Add</button>
41+
</form>
42+
43+
<a href="https://www.thenetninja.co.uk">The Net Ninja</a>
44+
</footer>
45+
46+
<script src='main.js'></script>
47+
</body>
48+
</html>

‎public/main.js

Whitespace-only changes.

‎public/styles.css

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
body{
2+
margin: 0;
3+
font-family: Roboto;
4+
}
5+
.wrapper{
6+
max-width: 960px;
7+
margin: 0 auto;
8+
}
9+
h1{
10+
margin: 40px auto;
11+
color: #ff0aa7;
12+
text-align: center;
13+
}
14+
ul{
15+
padding: 0;
16+
list-style-type: none;
17+
}
18+
li{
19+
padding: 6px 10px;
20+
border: 1px solid #eee;
21+
margin: 10px auto;
22+
}
23+
li h4{
24+
color: #ff0aa7;
25+
margin: 0;
26+
text-transform: capitalize;
27+
}
28+
li p{
29+
color: #333;
30+
margin: 8px 0 0;
31+
}
32+
footer{
33+
background: #eee;
34+
padding: 60px;
35+
margin-top: 60px;
36+
}
37+
form{
38+
max-width: 960px;
39+
margin: 0 auto;
40+
text-align: center;
41+
}
42+
label{
43+
display: block;
44+
font-weight: bold;
45+
font-size: 0.8em;
46+
color: #333;
47+
margin: 16px 0 6px;
48+
}
49+
input, select{
50+
padding: 6px;
51+
border: 1px solid #e1e1e1;
52+
border-radius: 4px;
53+
}
54+
.field{
55+
display: inline-block;
56+
margin: 0 10px;
57+
}
58+
button{
59+
color: white;
60+
border: 0;
61+
background: #ff0aa7;
62+
padding: 6px;
63+
min-width: 80px;
64+
border-radius: 4px;
65+
}
66+
footer a{
67+
text-align: center;
68+
display: block;
69+
color: #999;
70+
margin-top: 40px;
71+
font-size: 0.7em;
72+
}

‎src/classes/Invoice.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {HasFormatter} from "../interfaces/HasFormatter"
2+
export class Invoice implements HasFormatter{
3+
public client:string;
4+
public detail:string;
5+
readonly amount:number
6+
7+
constructor(_client:string, _detail:string, _amount:number){
8+
this.client=_client,
9+
this.detail=_detail,
10+
this.amount=_amount
11+
}
12+
13+
format(){
14+
return(`${this.client} ${this.detail} ${this.amount}`)
15+
}
16+
}
17+

‎src/classes/Payment.ts

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

‎src/classes/Person.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export class Person{
2+
private firstname:string;
3+
public lastName:string;
4+
readonly age:number;
5+
6+
constructor(fName:string, lName:string, _age:number){
7+
this.firstname=fName,
8+
this.lastName=lName,
9+
this.age=_age
10+
}
11+
12+
workformat(){
13+
return (`${this.firstname} ${this.lastName} ${this.age} is years old`)
14+
}
15+
}
16+
17+
let Kelly = new Person("Kelly","Osoba",30);
18+
let Jaja = new Person("Samuel","Jaja", 30)
19+
20+
console.log(Kelly)
21+
console.log(Jaja)

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

‎src/main.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {Invoice} from "./classes/Invoice"
2+
import {Person} from "./classes/Person"
3+
4+
let invoice1 = new Invoice("Catherine", "is the love of my life & a very excellent writer", 30)
5+
let invoice2 = new Invoice("Jaja", ".NET Software Engineer with CypherCrescent & Microsoft", 30 )
6+
7+
let staff1 = new Person("Catherine", "Umesi", 22)
8+
let staff2 = new Person("Samuel", "Jaja", 30)
9+
10+
console.log(invoice1,invoice2)
11+
console.log(staff1,staff2)
12+
13+
let invoices: Invoice[] = [];
14+
invoices.push(invoice1);
15+
invoices.push(invoice2);
16+
let staff: Person[] =[];
17+
staff.push(staff1);
18+
staff.push(staff2);
19+

0 commit comments

Comments
 (0)