From e642517747cc3bb36fd361447fdbb43e7145fcad Mon Sep 17 00:00:00 2001
From: Aleksey Filippov <al.filippov@ulstu.ru>
Date: Thu, 7 Nov 2024 10:32:00 +0400
Subject: [PATCH] Fix html pages

---
 index.html   |   3 +-
 page-js.html | 225 ++++++++++++++++++++++++++-------------------------
 page2.html   |   3 +-
 page3.html   |   3 +-
 4 files changed, 120 insertions(+), 114 deletions(-)
diff --git a/index.html b/index.html
index 8cf8613..4d6d093 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,5 @@
-<html lang="ru">
+<!doctype html>
+<html lang="ru" class="h-100">
     <head>
         <meta charset="utf-8" />
         <title>Моя страница</title>
diff --git a/page-js.html b/page-js.html
index 297f7b9..537b3c0 100644
--- a/page-js.html
+++ b/page-js.html
@@ -1,118 +1,121 @@
-<html lang="ru">
+<!doctype html>
+<html lang="ru" class="h-100">
+    <head>
+        <meta charset="utf-8" />
+        <title>Моя страница</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+        <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <link href="./node_modules/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet" />
+        <link rel="stylesheet" href="./css/style.css" />
+    </head>
 
-</html>
-
-<head>
-    <meta charset="utf-8">
-    <title>Моя страница</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
-    <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
-    <link href="./node_modules/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet" />
-    <link rel="stylesheet" href="./css/style.css">
-</head>
-
-<body class="h-100 d-flex flex-column">
-    <header>
-        <nav class="navbar navbar-expand-md navbar-dark">
-            <div class="container-fluid">
-                <a class="navbar-brand" href="/">
-                    <i class="bi bi-app"></i>
-                    Мой сайт
-                </a>
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
-                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-                <div class="navbar-collapse collapse justify-content-end" id="navbarNav">
-                    <div class="navbar-nav">
-                        <a class="nav-link" href="./index.html">Главная страница</a>
-                        <a class="nav-link" href="./page2.html">Вторая страница</a>
-                        <a class="nav-link" href="./page3.html">Третья страница</a>
-                        <a class="nav-link active" href="./page-js.html">JavaScript</a>
+    <body class="h-100 d-flex flex-column">
+        <header>
+            <nav class="navbar navbar-expand-md navbar-dark">
+                <div class="container-fluid">
+                    <a class="navbar-brand" href="/">
+                        <i class="bi bi-app"></i>
+                        Мой сайт
+                    </a>
+                    <button
+                        class="navbar-toggler"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#navbarNav"
+                        aria-controls="navbarNav"
+                        aria-expanded="false"
+                        aria-label="Toggle navigation"
+                    >
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
+                    <div class="navbar-collapse collapse justify-content-end" id="navbarNav">
+                        <div class="navbar-nav">
+                            <a class="nav-link" href="./index.html">Главная страница</a>
+                            <a class="nav-link" href="./page2.html">Вторая страница</a>
+                            <a class="nav-link" href="./page3.html">Третья страница</a>
+                            <a class="nav-link active" href="./page-js.html">JavaScript</a>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </nav>
-    </header>
-    <main class="container-fluid p-3">
-        <table class="table table-sm table-hover">
-            <thead>
-                <tr>
-                <th scope="col">#</th>
-                <th scope="col">Last</th>
-                <th scope="col">First</th>
-                <th scope="col">Birthday</th>
-                <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">
-            </tbody>
-        </table>
-    </main>
-    <footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
-        Автор, 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}`);
-            }
-        };
+            </nav>
+        </header>
+        <main class="container-fluid p-3">
+            <table class="table table-sm table-hover">
+                <thead>
+                    <tr>
+                        <th scope="col">#</th>
+                        <th scope="col">Last</th>
+                        <th scope="col">First</th>
+                        <th scope="col">Birthday</th>
+                        <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"></tbody>
+            </table>
+        </main>
+        <footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
+            Автор, 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) => {
-                const createTd = (value) => {
-                    const td = document.createElement("td");
-                    td.innerText = value;
-                    return td;
-                };
+            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) => {
+                    const createTd = (value) => {
+                        const td = document.createElement("td");
+                        td.innerText = value;
+                        return td;
+                    };
 
-                const container = document.createElement("tr");
-                const id = document.createElement("th");
-                id.setAttribute("scope", "row");
-                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");
-                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();
+                    const container = document.createElement("tr");
+                    const id = document.createElement("th");
+                    id.setAttribute("scope", "row");
+                    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");
+                    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);
                 });
-                students.appendChild(container);
+                console.log(data);
+            };
+
+            document.addEventListener("DOMContentLoaded", () => {
+                getStudents();
             });
-            console.log(data);
-        };
-
-        document.addEventListener("DOMContentLoaded", () => {
-            getStudents();
-        });
-    </script>
-</body>
-
-</html>
\ No newline at end of file
+        </script>
+    </body>
+</html>
diff --git a/page2.html b/page2.html
index 18b6c63..6b653fd 100644
--- a/page2.html
+++ b/page2.html
@@ -1,4 +1,5 @@
-<html lang="ru">
+<!doctype html>
+<html lang="ru" class="h-100">
     <head>
         <meta charset="utf-8" />
         <title>Моя страница</title>
diff --git a/page3.html b/page3.html
index 89be119..00c25bf 100644
--- a/page3.html
+++ b/page3.html
@@ -1,4 +1,5 @@
-<html lang="ru">
+<!doctype html>
+<html lang="ru" class="h-100">
     <head>
         <meta charset="utf-8" />
         <title>Моя страница</title>
