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