u

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