Add delete student function

.eslintrc.json

@@ -4,7 +4,7 @@
         "es2021": true
     },
     "extends": ["airbnb-base", "prettier"],
-    "plugins": ["prettier"],
+    "plugins": ["prettier", "html"],
     "parserOptions": {
         "ecmaVersion": 12,
         "sourceType": "module"

package-lock.json

@@ -15,6 +15,7 @@
                 "eslint": "8.57.1",
                 "eslint-config-airbnb-base": "15.0.0",
                 "eslint-config-prettier": "9.1.0",
+                "eslint-plugin-html": "8.1.2",
                 "eslint-plugin-import": "2.31.0",
                 "eslint-plugin-prettier": "5.2.1",
                 "http-server": "14.1.1",
@@ -1648,6 +1649,65 @@
                 "node": ">=6.0.0"
             }
         },
+        "node_modules/dom-serializer": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+            "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.2",
+                "entities": "^4.2.0"
+            },
+            "funding": {
+                "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+            }
+        },
+        "node_modules/domelementtype": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+            "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/fb55"
+                }
+            ],
+            "license": "BSD-2-Clause"
+        },
+        "node_modules/domhandler": {
+            "version": "5.0.3",
+            "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+            "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "domelementtype": "^2.3.0"
+            },
+            "engines": {
+                "node": ">= 4"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/domhandler?sponsor=1"
+            }
+        },
+        "node_modules/domutils": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+            "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "dom-serializer": "^2.0.0",
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.3"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/domutils?sponsor=1"
+            }
+        },
         "node_modules/ee-first": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -1672,6 +1732,19 @@
                 "node": ">= 0.8"
             }
         },
+        "node_modules/entities": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+            "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "engines": {
+                "node": ">=0.12"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/entities?sponsor=1"
+            }
+        },
         "node_modules/error-ex": {
             "version": "1.3.2",
             "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -2028,6 +2101,19 @@
                 }
             }
         },
+        "node_modules/eslint-plugin-html": {
+            "version": "8.1.2",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-8.1.2.tgz",
+            "integrity": "sha512-pbRchDV2SmqbCi/Ev/q3aAikzG9BcFe0IjjqjtMn8eTLq71ZUggyJB6CDmuwGAXmYZHrXI12XTfCqvgcnPRqGw==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "htmlparser2": "^9.1.0"
+            },
+            "engines": {
+                "node": ">=16.0.0"
+            }
+        },
         "node_modules/eslint-plugin-import": {
             "version": "2.31.0",
             "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz",
@@ -2916,6 +3002,26 @@
                 "node": ">=12"
             }
         },
+        "node_modules/htmlparser2": {
+            "version": "9.1.0",
+            "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
+            "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
+            "dev": true,
+            "funding": [
+                "https://github.com/fb55/htmlparser2?sponsor=1",
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/fb55"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.3",
+                "domutils": "^3.1.0",
+                "entities": "^4.5.0"
+            }
+        },
         "node_modules/http-errors": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -6455,6 +6561,43 @@
                 "esutils": "^2.0.2"
             }
         },
+        "dom-serializer": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+            "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+            "dev": true,
+            "requires": {
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.2",
+                "entities": "^4.2.0"
+            }
+        },
+        "domelementtype": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+            "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+            "dev": true
+        },
+        "domhandler": {
+            "version": "5.0.3",
+            "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+            "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+            "dev": true,
+            "requires": {
+                "domelementtype": "^2.3.0"
+            }
+        },
+        "domutils": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+            "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+            "dev": true,
+            "requires": {
+                "dom-serializer": "^2.0.0",
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.3"
+            }
+        },
         "ee-first": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -6473,6 +6616,12 @@
             "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
             "dev": true
         },
+        "entities": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+            "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+            "dev": true
+        },
         "error-ex": {
             "version": "1.3.2",
             "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -6801,6 +6950,15 @@
                 "debug": "^3.2.7"
             }
         },
+        "eslint-plugin-html": {
+            "version": "8.1.2",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-8.1.2.tgz",
+            "integrity": "sha512-pbRchDV2SmqbCi/Ev/q3aAikzG9BcFe0IjjqjtMn8eTLq71ZUggyJB6CDmuwGAXmYZHrXI12XTfCqvgcnPRqGw==",
+            "dev": true,
+            "requires": {
+                "htmlparser2": "^9.1.0"
+            }
+        },
         "eslint-plugin-import": {
             "version": "2.31.0",
             "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz",
@@ -7342,6 +7500,18 @@
                 "whatwg-encoding": "^2.0.0"
             }
         },
+        "htmlparser2": {
+            "version": "9.1.0",
+            "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
+            "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
+            "dev": true,
+            "requires": {
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.3",
+                "domutils": "^3.1.0",
+                "entities": "^4.5.0"
+            }
+        },
         "http-errors": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",

package.json

@@ -24,6 +24,7 @@
         "eslint-config-airbnb-base": "15.0.0",
         "eslint-config-prettier": "9.1.0",
         "eslint-plugin-import": "2.31.0",
-        "eslint-plugin-prettier": "5.2.1"
+        "eslint-plugin-prettier": "5.2.1",
+        "eslint-plugin-html": "8.1.2"
     }
 }

page-js.html

@@ -46,6 +46,7 @@
                 <th scope="col">E-Mail</th>
                 <th scope="col">Phone</th>
                 <th scope="col">Group</th>
+                <th scope="col"></th>
                 </tr>
             </thead>
             <tbody id="students">
@@ -56,11 +57,27 @@
         Автор, 2022
     </footer>
     <script type="module">
+        const deleteStudent = async (id) => {
+            // eslint-disable-next-line no-restricted-globals, no-alert
+            const answer = confirm(`Do you want to delete student with id = ${id}?`);
+            if (!answer) {
+                return;
+            }
+            const response = await fetch(`http://localhost:3001/students/${id}`, { method: "delete" });
+            if (!response.ok) {
+                throw new Error(`Response status: ${response.status}`);
+            }
+        };
+
         const getStudents = async () => {
             const students = document.getElementById("students");
+            students.innerHTML = "";
             const response = await fetch("http://localhost:3001/students?_expand=group");
+            if (!response.ok) {
+                throw new Error(`Response status: ${response.status}`);
+            }
             const data = await response.json();
-            data.forEach(element => {
+            data.forEach((element) => {
                 const createTd = (value) => {
                     const td = document.createElement("td");
                     td.innerText = value;
@@ -78,6 +95,15 @@
                 container.appendChild(createTd(element.email));
                 container.appendChild(createTd(element.phone));
                 container.appendChild(createTd(element.group.name));
+                const btn = document.createElement("button");
+                btn.setAttribute("type", "button");
+                btn.classList.add("btn", "btn-danger");
+                btn.innerHTML = "Delete";
+                container.appendChild(btn);
+                btn.addEventListener("click", async () => {
+                    await deleteStudent(element.id);
+                    getStudents();
+                });
                 students.appendChild(container);
             });
             console.log(data);