Lections/upas-web-site
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix html pages

Browse Source
This commit is contained in:
Aleksey Filippov 2024-11-07 10:32:00 +04:00
parent b4647fe4e9
commit e642517747
4 changed files with 120 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -1,4 +1,5 @@
<html lang="ru"> <!doctype html>
<html lang="ru" class="h-100">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Моя страница</title> <title>Моя страница</title>

223
page-js.html
View File

@ -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> <body class="h-100 d-flex flex-column">
<header>
<head> <nav class="navbar navbar-expand-md navbar-dark">
<meta charset="utf-8"> <div class="container-fluid">
<title>Моя страница</title> <a class="navbar-brand" href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <i class="bi bi-app"></i>
<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" /> </a>
<link href="./node_modules/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet" /> <button
<link rel="stylesheet" href="./css/style.css"> class="navbar-toggler"
</head> type="button"
data-bs-toggle="collapse"
<body class="h-100 d-flex flex-column"> data-bs-target="#navbarNav"
<header> aria-controls="navbarNav"
<nav class="navbar navbar-expand-md navbar-dark"> aria-expanded="false"
<div class="container-fluid"> aria-label="Toggle navigation"
<a class="navbar-brand" href="/"> >
<i class="bi bi-app"></i> <span class="navbar-toggler-icon"></span>
Мой сайт </button>
</a> <div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" <div class="navbar-nav">
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <a class="nav-link" href="./index.html">Главная страница</a>
<span class="navbar-toggler-icon"></span> <a class="nav-link" href="./page2.html">Вторая страница</a>
</button> <a class="nav-link" href="./page3.html">Третья страница</a>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav"> <a class="nav-link active" href="./page-js.html">JavaScript</a>
<div class="navbar-nav"> </div>
<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>
</div> </nav>
</nav> </header>
</header> <main class="container-fluid p-3">
<main class="container-fluid p-3"> <table class="table table-sm table-hover">
<table class="table table-sm table-hover"> <thead>
<thead> <tr>
<tr> <th scope="col">#</th>
<th scope="col">#</th> <th scope="col">Last</th>
<th scope="col">Last</th> <th scope="col">First</th>
<th scope="col">First</th> <th scope="col">Birthday</th>
<th scope="col">Birthday</th> <th scope="col">E-Mail</th>
<th scope="col">E-Mail</th> <th scope="col">Phone</th>
<th scope="col">Phone</th> <th scope="col">Group</th>
<th scope="col">Group</th> <th scope="col"></th>
<th scope="col"></th> </tr>
</tr> </thead>
</thead> <tbody id="students"></tbody>
<tbody id="students"> </table>
</tbody> </main>
</table> <footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
</main> Автор, 2022
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center"> </footer>
Автор, 2022 <script type="module">
</footer> const deleteStudent = async (id) => {
<script type="module"> // eslint-disable-next-line no-restricted-globals, no-alert
const deleteStudent = async (id) => { const answer = confirm(`Do you want to delete student with id = ${id}?`);
// eslint-disable-next-line no-restricted-globals, no-alert if (!answer) {
const answer = confirm(`Do you want to delete student with id = ${id}?`); return;
if (!answer) { }
return; const response = await fetch(`http://localhost:3001/students/${id}`, { method: "delete" });
} if (!response.ok) {
const response = await fetch(`http://localhost:3001/students/${id}`, { method: "delete" }); throw new Error(`Response status: ${response.status}`);
if (!response.ok) { }
throw new Error(`Response status: ${response.status}`); };
}
};
const getStudents = async () => { const getStudents = async () => {
const students = document.getElementById("students"); const students = document.getElementById("students");
students.innerHTML = ""; students.innerHTML = "";
const response = await fetch("http://localhost:3001/students?_expand=group"); const response = await fetch("http://localhost:3001/students?_expand=group");
if (!response.ok) { if (!response.ok) {
throw new Error(`Response status: ${response.status}`); throw new Error(`Response status: ${response.status}`);
} }
const data = await response.json(); const data = await response.json();
data.forEach((element) => { data.forEach((element) => {
const createTd = (value) => { const createTd = (value) => {
const td = document.createElement("td"); const td = document.createElement("td");
td.innerText = value; td.innerText = value;
return td; return td;
}; };
const container = document.createElement("tr"); const container = document.createElement("tr");
const id = document.createElement("th"); const id = document.createElement("th");
id.setAttribute("scope", "row"); id.setAttribute("scope", "row");
id.innerText = element.id; id.innerText = element.id;
container.appendChild(id); container.appendChild(id);
container.appendChild(createTd(element.last_name)); container.appendChild(createTd(element.last_name));
container.appendChild(createTd(element.first_name)); container.appendChild(createTd(element.first_name));
container.appendChild(createTd(element.bdate)); container.appendChild(createTd(element.bdate));
container.appendChild(createTd(element.email)); container.appendChild(createTd(element.email));
container.appendChild(createTd(element.phone)); container.appendChild(createTd(element.phone));
container.appendChild(createTd(element.group.name)); container.appendChild(createTd(element.group.name));
const btn = document.createElement("button"); const btn = document.createElement("button");
btn.setAttribute("type", "button"); btn.setAttribute("type", "button");
btn.classList.add("btn", "btn-danger"); btn.classList.add("btn", "btn-danger");
btn.innerHTML = "Delete"; btn.innerHTML = "Delete";
container.appendChild(btn); container.appendChild(btn);
btn.addEventListener("click", async () => { btn.addEventListener("click", async () => {
await deleteStudent(element.id); await deleteStudent(element.id);
getStudents(); getStudents();
});
students.appendChild(container);
}); });
students.appendChild(container); console.log(data);
};
document.addEventListener("DOMContentLoaded", () => {
getStudents();
}); });
console.log(data); </script>
}; </body>
document.addEventListener("DOMContentLoaded", () => {
getStudents();
});
</script>
</body>
</html> </html>

3
page2.html
View File

@ -1,4 +1,5 @@
<html lang="ru"> <!doctype html>
<html lang="ru" class="h-100">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Моя страница</title> <title>Моя страница</title>

3
page3.html
View File

@ -1,4 +1,5 @@
<html lang="ru"> <!doctype html>
<html lang="ru" class="h-100">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Моя страница</title> <title>Моя страница</title>