diff --git a/page-js.html b/page-js.html index 537b3c0..8b0cb61 100644 --- a/page-js.html +++ b/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"); - id.setAttribute("scope", "row"); - id.innerText = element.id; - container.appendChild(id); + container.classList.add("align-middle"); + container.appendChild(createTh(element.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"); - 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(); - }); + container.appendChild( + createButton("Delete", "btn-danger", async () => { + await deleteStudent(element.id); + getStudents(); + }) + ); students.appendChild(container); }); console.log(data);