add

main.js

@@ -0,0 +1,128 @@
+/*
+
+Quản lý student
+
+*/
+let countId = 0;
+
+let students = [
+    {
+        id: -2,
+        name: "Phước",
+        age: 35,
+        isInLove: false,
+        gender: "male",
+        dob: "1985-12-11"
+    },
+    {
+        id: -1,
+        name: "Hương",
+        age: 25,
+        isInLove: true,
+        gender: "female",
+        dob: "1895-11-05"
+    }
+]
+
+if(localStorage.getItem("students")) {
+    students = JSON.parse(localStorage.getItem("students"))
+}
+
+const tbodyEL = document.querySelector("tbody")
+const formEl = document.querySelector("form")
+
+let editStudent = null;
+
+function renderUi() {
+    localStorage.setItem("students", JSON.stringify(students))
+
+
+    let tbodyHtml = ``
+
+    students.forEach((value, key) => {
+        tbodyHtml += `
+            <tr>
+                <td>${key}</td>
+                <td>${value.id}</td>
+                <td>${value.name}</td>
+                <td>${value.age}</td>
+                <td>${value.isInLove ? "có" : "không"}</td>
+                <td>${value.gender}</td>
+                <td>${value.dob}</td>
+                <td>
+                    <button onclick="deleteStudent(${value.id})">xóa</button>
+                    <button onclick="setEditStudent(${value.id})">sửa</button>
+                </td>
+            </tr>  
+        `
+    })
+
+    tbodyEL.innerHTML = tbodyHtml
+
+    formEl.querySelector("#form_title").innerHTML = editStudent ? "Sửa sinh viên" : "Thêm Sinh Viên"
+
+    if (editStudent) {
+        formEl.querySelectorAll("input")[0].value = editStudent.name;
+        formEl.querySelectorAll("input")[1].value = editStudent.age;
+        formEl.querySelectorAll("input")[editStudent.isInLove ? 2 : 3].checked = true;
+
+        let options = formEl.querySelectorAll("option");
+
+        for (op of options) {
+            if (op.value == editStudent.gender) {
+                op.selected = true;
+                break
+            }
+        }
+
+        formEl.querySelectorAll("input")[4].value = editStudent.dob;
+
+    }
+
+}
+
+function save(event) {
+    event.preventDefault();
+    let form = event.target;
+
+    let newStudent = {
+        id: editStudent ? editStudent.id : countId++,
+        name: form.name.value,
+        age: form.age.value,
+        isInLove: form.isInLove.value,
+        gender: form.gender.value,
+        dob: form.dob.value
+    }
+
+    if (editStudent) {
+        for (let i = 0; i < students.length; i++) {
+            if (students[i].id == editStudent.id) {
+                students[i] = newStudent
+                break
+            }
+        }
+    } else {
+        students.push(newStudent)
+    }
+
+
+    renderUi()
+    formEl.reset()
+    editStudent = null;
+}
+
+function deleteStudent(stuId) {
+    if (confirm("xác nhận xóa!")) {
+        students = students.filter(stu => stu.id != stuId)
+    }
+
+    renderUi()
+}
+
+function setEditStudent(stuId) {
+    editStudent = students.find(stu => stu.id == stuId)
+
+    renderUi()
+}
+
+renderUi()