Fix ugly buttons

page-js.html

@@ -82,32 +82,43 @@
                 }
                 const data = await response.json();
                 data.forEach((element) => {
+                    const createTh = (value) => {
+                        const th = document.createElement("th");
+                        th.setAttribute("scope", "row");
+                        th.innerText = value;
+                        return th;
+                    };
                     const createTd = (value) => {
                         const td = document.createElement("td");
                         td.innerText = value;
                         return td;
                     };
+                    const createButton = (text, type, action) => {
+                        const btn = document.createElement("button");
+                        btn.setAttribute("type", "button");
+                        btn.classList.add("btn", type);
+                        btn.innerHTML = text;
+                        btn.addEventListener("click", action);
+                        const td = document.createElement("td");
+                        td.appendChild(btn);
+                        return td;
+                    };
 
                     const container = document.createElement("tr");
-                    const id = document.createElement("th");
+                    container.classList.add("align-middle");
-                    id.setAttribute("scope", "row");
+                    container.appendChild(createTh(element.id));
-                    id.innerText = element.id;
-                    container.appendChild(id);
                     container.appendChild(createTd(element.last_name));
                     container.appendChild(createTd(element.first_name));
                     container.appendChild(createTd(element.bdate));
                     container.appendChild(createTd(element.email));
                     container.appendChild(createTd(element.phone));
                     container.appendChild(createTd(element.group.name));
-                    const btn = document.createElement("button");
+                    container.appendChild(
-                    btn.setAttribute("type", "button");
+                        createButton("Delete", "btn-danger", async () => {
-                    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);