commit 79d1f2aa7641778f631888230067ca13e9732942 Author: PhuocNTB Date: Wed Jul 22 21:40:43 2026 +0700 u diff --git a/index.html b/index.html new file mode 100644 index 0000000..fa6bf17 --- /dev/null +++ b/index.html @@ -0,0 +1,52 @@ + + + + + + + Document + + + + +
+
+ + + + +
+
+ + + + + + + + + + + + + + + + + + + + + +
sttnamegenderdobtools
1PhướcNam07/22/2026 + +
+ + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..a0fcd90 --- /dev/null +++ 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 += ` + + ${i + 1} + ${userList[i].name} + ${getGenderText(userList[i].gender)} + ${userList[i].dob} + + + + + ` + } + + + 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() diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..0d485ed --- /dev/null +++ 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