u

2026-07-22 21:40:43 +07:00
commit 79d1f2aa76
3 changed files with 149 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+
+    <div>
+        <form onsubmit="save(event)">
+            <input name="name" type="text" placeholder="name">
+            <select name="gender">
+                <option value="male">Nam</option>
+                <option value="female">Nữ</option>
+                <option value="other">Khác</option>
+            </select>
+            <input name="dob" type="date">
+            <button>lưu</button>
+        </form>
+    </div>
+
+    <table border="1px">
+        <thead>
+            <tr>
+                <th>stt</th>
+                <th>name</th>
+                <th>gender</th>
+                <th>dob</th>
+                <th>tools</th>
+            </tr>
+        </thead>
+        <tbody id="table_data_box">
+            <tr>
+                <td>1</td>
+                <td>Phước</td>
+                <td>Nam</td>
+                <td>07/22/2026</td>
+                <td>
+                    <button onclick="deleteUser(1)">Xóa</button>
+                </td>
+            </tr>
+
+        </tbody>
+    </table>
+
+    <script src="main.js"></script>
+</body>
+
+</html>
--- a/main.js
+++ b/main.js
@@ -0,0 +1,90 @@
+let userList = [
+    {
+        id: -1,
+        name: "Phước",
+        gender: "female", // male, female, other
+        dob: "07/22/2026"
+    }
+]
+
+if(!localStorage.getItem("userList")) { // kiểm tra local có hay chưa
+    /* nếu chưa set lên */
+    localStorage.setItem("userList", JSON.stringify(userList))
+}else {
+    /* nếu rồi lấy về lưu vào data userList */
+    userList = JSON.parse(localStorage.getItem("userList"))
+}   
+
+const table_data_box_el = document.querySelector("#table_data_box");
+
+
+
+function renderUi() {
+
+    let data_html = ""
+
+    for (let i = 0; i < userList.length; i++) {
+        console.log("userList", userList[i])
+        data_html += `
+            <tr>
+                <td>${i + 1}</td>
+                <td>${userList[i].name}</td>
+                <td>${getGenderText(userList[i].gender)}</td>
+                <td>${userList[i].dob}</td>
+                <td>
+                    <button onclick="deleteUser(${userList[i].id})">Xóa</button>
+                </td>
+            </tr>
+        `
+    }
+
+
+    table_data_box_el.innerHTML = data_html
+
+    localStorage.setItem("userList", JSON.stringify(userList))
+}
+
+function save(e) {
+    e.preventDefault() // hủy hình vi call action mặc định của form
+    
+    let formEL = e.target;
+
+    let newUser = {
+        id: Date.now(),
+        name: formEL.name.value,
+        gender: formEL.gender.value,
+        dob: formEL.dob.value,
+    }
+
+    console.log("newUser", newUser)
+
+    userList.push(newUser)
+
+    renderUi()
+}
+
+function deleteUser(userId) {
+    for (let i = 0; i < userList.length; i++) {
+        if(userList[i].id == userId) {
+            userList.splice(i, 1)
+            break
+        }
+    }
+
+    renderUi()
+}
+
+/* helper function */
+function getGenderText(genderCode) {
+    switch (genderCode) {
+        case "male":
+            return "nam"
+        case "female":
+            return "nữ"
+        default:
+            return "Khác"
+    }
+}
+
+
+renderUi()
--- a/readme.md
+++ b/readme.md
@@ -0,0 +1,7 @@
+/*
+- Quản lý user đơn giản
+ CRUD // create, read, update, delete
+ id, name, gender, dob
+*/
+
+1/ ứng dụng web - quản lý user đơn giản