phuocntb/demo_project_ts_html_css_ts_basic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

data

Browse Source
This commit is contained in:
Nguyễn Phước
2026-06-11 20:03:57 +07:00
parent c6192ec339
commit 3d597a4a95
4 changed files with 155 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
index.html
View File

@@ -1,23 +1,54 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>demo_project</title>
</head>
<body>
<div id="app"></div>
<form onsubmit="myPersonalFinanceManager.addTrade(event)">
<input type="text">
<select name="" id="form_select">
<option value=""></option>
</select>
<button>Lưu Giao Dịch</button>
</form>
<script src="/src/main.ts"></script>
</body>
</html>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>demo_project</title>
</head>
<body>
<div id="app"></div>
<form onsubmit="myPersonalFinanceManager.addTrade(event)">
<label for="">Danh mục giao dịch</label>
<select name="categoryId" id="form_select">
<!-- <option value=""></option> -->
</select>
<br>
<label for="">Nhập số tiền giao dịch</label>
<input name="valueMoney" type="number">
<br>
<label for="">Ngày giao dịch</label>
<input name="createAt" type="date">
<br>
<label for="">Ghi chú giao dịch</label>
<textarea name="note" type="note"></textarea>
<br>
<button>Lưu Giao Dịch</button>
</form>
<table border="1px">
<thead>
<tr>
<th>Danh Mục</th>
<th>Hạn Mức</th>
<th>Đã Chi Tháng Này</th>
<th>Thao Tác</th>
</tr>
</thead>
<tbody id="tableBodyCategory">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script src="/src/main.ts"></script>
</body>
</html>

12
package-lock.json generated
View File

@@ -7,6 +7,9 @@
"": {
"name": "demo_project",
"version": "0.0.0",
"dependencies": {
"moment": "^2.30.1"
},
"devDependencies": {
"typescript": "~6.0.2",
"vite": "^8.0.12"
@@ -684,6 +687,15 @@
"url": "https://opencollective.com/parcel"
}
},
"node_modules/moment": {
"version": "2.30.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
"license": "MIT",
"engines": {
"node": "*"
}
},
"node_modules/nanoid": {
"version": "3.3.12",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",

3
package.json
View File

@@ -11,5 +11,8 @@
"devDependencies": {
"typescript": "~6.0.2",
"vite": "^8.0.12"
},
"dependencies": {
"moment": "^2.30.1"
}
}

94
src/main.ts
View File

@@ -9,7 +9,7 @@ interface Trade {
categoryId: number;
valueMoney: number; // có thể âm + thu, - chi
createAt: Date;
note: string;
note?: string;
}
type PersonalFinanceManagerData = Trade[] | null;
@@ -17,13 +17,19 @@ type CategoryData = Category[] | null;
class PersonalFinanceManager {
private personalFinanceManagerData: Trade[] | null;
private categoryData: Category[] | null;
private personalFinanceManagerData: PersonalFinanceManagerData;
private categoryData: CategoryData;
static tradeCount: number = 0
private form_select: Element | null;
private tableBodyCategoryEL: Element | null;
constructor() {
this.form_select = document.querySelector("#form_select");
this.personalFinanceManagerData = [];
this.tableBodyCategoryEL = document.querySelector("#tableBodyCategory");
this.categoryData = [
{
id: -2,
@@ -37,6 +43,15 @@ class PersonalFinanceManager {
}
];
this.personalFinanceManagerData = [
{
id: -1,
categoryId: -1,
valueMoney: -10000,
createAt: new Date(),
}
];
this.renderUi(this.personalFinanceManagerData)
}
@@ -53,11 +68,80 @@ class PersonalFinanceManager {
this.form_select.innerHTML = optionHtmlList;
}
}
/* Render Danh Sách Danh mục */
if (this.categoryData) {
console.log("vào 1")
let trHtmlList = ``;
for (let i = 0; i < this.categoryData.length; i++) {
trHtmlList += `
<tr>
<td>${this.categoryData[i].title}</td>
<td>${this.categoryData[i].limitMoney}</td>
<td>${this.getMoneyTradeNowMonth(this.categoryData[i].id)}</td>
<td>
<button>Xóa</button>
</td>
</tr>
`
}
if (this.tableBodyCategoryEL) {
this.tableBodyCategoryEL.innerHTML = trHtmlList;
}
}
}
public addTrade() {
private getMoneyTradeNowMonth(categoryId: number) {
let result = 0;
if (this.personalFinanceManagerData)
for (let i = 0; i < this.personalFinanceManagerData.length; i++) {
if (this.personalFinanceManagerData[i].categoryId == categoryId) {
if (this.checkDateInMonth(this.personalFinanceManagerData[i].createAt)) {
if (this.personalFinanceManagerData[i].valueMoney < 0) {
result += this.personalFinanceManagerData[i].valueMoney;
}
}
}
}
return result * -1;
}
public addTrade(e: FormDataEvent) {
e.preventDefault();
let form: any = e.target;
if (form) {
let newTrade: Trade = {
id: PersonalFinanceManager.tradeCount++,
categoryId: form.categoryId.value,
valueMoney: form.valueMoney.value,
createAt: form.createAt.value,
note: form.note.value
}
this.personalFinanceManagerData?.push(newTrade)
} else {
alert("Form Lỗi Đọc!")
}
console.log("đã vào")
}
public checkDateInMonth(targetDate: Date): boolean {
let nowDate = new Date();
if (targetDate.getFullYear() != nowDate.getFullYear()) {
return false;
}
if (targetDate.getMonth() != nowDate.getMonth()) {
return false;
}
return true;
}
}
const myPersonalFinanceManager = new PersonalFinanceManager();