Skip to content

Commit 39333d3

Browse files
NisanurBulutNisanurBulut
authored
Merge pull request #36 from NisanurBulut/dev-sayhitypescript
Dev sayhitypescript is merged
2 parents 014590d + 04334ad commit 39333d3

File tree

17 files changed

+483
-1
lines changed

17 files changed

+483
-1
lines changed

‎README.md‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,8 +203,23 @@ The project topic is very simple: Users sign up for the application and see the
203203

204204
![SayHiXAML](https://github.com/NisanurBulut/SayHiCode/blob/master/Trailers/Trailer_SayHiXAML.gif)
205205

206+
### 12. SayHiTypeScript
207+
<hr>
208+
<img align="left" width="120px" height="120px" src="https://github.com/NisanurBulut/SayHiCode/blob/master/SayHiTypeScript/public/assets/logo.png"><p>In this tutorial, the installation and usage of typescript is explained. The basics of TypeScript are practiced. Especially the use of tuple and interface has been studied.<p>
209+
<b>This working will show you how to :</b>
210+
<hr>
211+
212+
![SayHiXAML](https://github.com/NisanurBulut/SayHiCode/blob/master/Trailers/Trailer_SayHiTypeScript.gif)
213+
214+
| Compiling TypeScript | Explicit Types | Classes | Rendering an HTML Template |
215+
|----------------------|----------------------------|----------------------------|----------------------------|
216+
| Type Basics | Dynamic (Any) Types | Public, Private & Readonly | Generics |
217+
| Object & Arrays | Better Workflow & tsconfig | Modules | Enums |
218+
| Function Basics | Type Alies | Interfaces | Tuples |
219+
| Function signatures | The Dom & Type Casting | Interfaces With Classes | |
220+
206221
## Helpfull Websites
207222
[json-to-js](https://www.convertonline.io/convert/json-to-js) [json2ts](http://json2ts.com/) [fusioncharts](https://www.fusioncharts.com/) [React-Query-Tutorial](https://www.youtube.com/watch?v=XRbnuiAbV3g&list=PLzJ4DQ1UrlRb0XiN-vecbtZ31t-Q2Z6BD&ab_channel=boraoren) [Laravel-artisan-blog](https://www.yasird.com/laravel-5-artisan-nedir/) [MailTrap](https://mailtrap.io/) [HeroIcons](https://heroicons.com/)
208223
[The Net Ninja- Laravel Tutorial](https://youtu.be/zckH4xalOns) [Quicksand](https://fonts.google.com/specimen/Quicksand) [MyColorSpace](https://mycolor.space/) [JokeAPI](https://v2.jokeapi.dev/joke/Any)
209224
[RestCountries](https://restcountries.eu/) [FakeStoreAPI](https://fakestoreapi.herokuapp.com/)
210-
[Strategy Pattern](https://www.youtube.com/watch?v=5upBcx8Z7FM&t=151s)
225+
[Strategy Pattern](https://www.youtube.com/watch?v=5upBcx8Z7FM&t=151s) [TypeScriptTutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI)

‎SayHiTypeScript/public/app.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
var __assign = (this && this.__assign) || function () {
2+
__assign = Object.assign || function(t) {
3+
for (var s, i = 1, n = arguments.length; i < n; i++) {
4+
s = arguments[i];
5+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6+
t[p] = s[p];
7+
}
8+
return t;
9+
};
10+
return __assign.apply(this, arguments);
11+
};
12+
var __spreadArray = (this && this.__spreadArray) || function (to, from) {
13+
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
14+
to[j] = from[i];
15+
return to;
16+
};
17+
import { Invoice } from "./classes/Invoice.js";
18+
import { ListTemplate } from "./classes/ListTemplate.js";
19+
import { Payment } from "./classes/Payment.js";
20+
var form = document.querySelector(".new-item-form");
21+
// inputs
22+
var type = document.querySelector("#type");
23+
var tofrom = document.querySelector("#tofrom");
24+
var details = document.querySelector("#details");
25+
var amount = document.querySelector("#amount");
26+
// list template instance
27+
var ul = document.querySelector("ul");
28+
var list = new ListTemplate(ul);
29+
form.addEventListener("submit", function (e) {
30+
e.preventDefault();
31+
var doc;
32+
var values = [
33+
tofrom.value,
34+
details.value,
35+
amount.valueAsNumber,
36+
];
37+
if (type.value === "invoice") {
38+
doc = new (Invoice.bind.apply(Invoice, __spreadArray([void 0], values)))();
39+
}
40+
else {
41+
doc = new (Payment.bind.apply(Payment, __spreadArray([void 0], values)))();
42+
}
43+
list.render(doc, type.value, "end");
44+
});
45+
var addUID = function (obj) {
46+
var uid = Math.floor(Math.random() * 100);
47+
return __assign(__assign({}, obj), { uid: uid });
48+
};
49+
// ENUMS
50+
var ResourceType;
51+
(function (ResourceType) {
52+
ResourceType[ResourceType["BOOK"] = 0] = "BOOK";
53+
ResourceType[ResourceType["AUTHOR"] = 1] = "AUTHOR";
54+
ResourceType[ResourceType["FILM"] = 2] = "FILM";
55+
ResourceType[ResourceType["DIRECTOR"] = 3] = "DIRECTOR";
56+
ResourceType[ResourceType["PERSON"] = 4] = "PERSON";
57+
})(ResourceType || (ResourceType = {}));
58+
var docOne = {
59+
uid: 1,
60+
resourceName: ResourceType.AUTHOR,
61+
data: { title: "Nisanur" },
62+
};
63+
var docThree = {
64+
uid: 3,
65+
resourceName: ResourceType.BOOK,
66+
data: "Gölge ve Kemik",
67+
};
68+
// tuples
69+
var arr = ["Nisanur", 29, true];
70+
arr[0] = false;
71+
arr[1] = "Nisanur";
72+
arr = [29, false, "Furkan"];
73+
var tup = ["Nisanur", 29, true];
74+
// tup[0]=false // error

‎SayHiTypeScript/public/assets/favicon.ico‎

7.15 KB
Binary file not shown.

‎SayHiTypeScript/public/assets/logo.png‎

18.9 KB
Loading

‎SayHiTypeScript/public/classes/Invoice.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
var Invoice = /** @class */ (function () {
2+
function Invoice(client, details, amount) {
3+
this.client = client;
4+
this.details = details;
5+
this.amount = amount;
6+
}
7+
Invoice.prototype.format = function () {
8+
return this.client + " owes " + this.amount + "\u20BA for " + this.details;
9+
};
10+
return Invoice;
11+
}());
12+
export { Invoice };

‎SayHiTypeScript/public/classes/ListTemplate.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
var ListTemplate = /** @class */ (function () {
2+
function ListTemplate(container) {
3+
this.container = container;
4+
}
5+
ListTemplate.prototype.render = function (item, heading, position) {
6+
var li = document.createElement('li');
7+
var h4 = document.createElement('h4');
8+
h4.innerText = heading;
9+
li.append(h4);
10+
var p = document.createElement('p');
11+
p.innerText = item.format();
12+
li.append(p);
13+
if (position === 'start') {
14+
this.container.prepend(li);
15+
}
16+
else {
17+
this.container.prepend(li);
18+
}
19+
};
20+
return ListTemplate;
21+
}());
22+
export { ListTemplate };
23+
/**
24+
* 1. register a list container (ul) in the constructor
25+
* 2. create a render method to render a new 'li' to the container
26+
* --- accepts arguments: invoice or payment, a heading, a position
27+
* --- create the html template (li, h4, p)
28+
* --- add the 'li' template to the start/end of the list
29+
*
30+
*/

‎SayHiTypeScript/public/classes/Payment.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
var Payment = /** @class */ (function () {
2+
function Payment(recipient, details, amount) {
3+
this.recipient = recipient;
4+
this.details = details;
5+
this.amount = amount;
6+
}
7+
Payment.prototype.format = function () {
8+
return this.recipient + " owes " + this.amount + "\u20BA for " + this.details;
9+
};
10+
return Payment;
11+
}());
12+
export { Payment };

‎SayHiTypeScript/public/index.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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>Say Hi TypeScript</title>
6+
<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon">
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
11+
<div class="wrapper">
12+
<div class="logo-wrapper">
13+
<img src="./assets/logo.png" /> <h1>Finance Logger</h1>
14+
</div>
15+
16+
<footer>
17+
<form class="new-item-form">
18+
<div class="field">
19+
<label>Type:</label>
20+
<select id="type">
21+
<option value="invoice">Invoice</option>
22+
<option value="payment">Payment</option>
23+
</select>
24+
</div>
25+
<div class="field">
26+
<label>To / From:</label>
27+
<input type="text" id="tofrom">
28+
</div>
29+
<div class="field">
30+
<label>Details:</label>
31+
<input type="text" id="details">
32+
</div>
33+
<div class="field">
34+
<label>Amount (₺):</label>
35+
<input type="number" id="amount">
36+
</div>
37+
<button>Add</button>
38+
</form>
39+
</footer>
40+
<!-- output list -->
41+
<ul class="item-list">
42+
43+
</ul>
44+
</div>
45+
46+
47+
<script type="module" src='app.js'></script>
48+
</body>
49+
</html>

‎SayHiTypeScript/public/interfaces/HasFormatter.js‎

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

‎SayHiTypeScript/public/styles.css‎

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

0 commit comments

Comments
 (0)