/
Coderdev
/
web-nodejs-labs
Обзор
Документация
Войти
/
Coderdev
/
web-nodejs-labs
Код
Запросы
0
Задачи
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
public/lab7/task2/index.html
190 строк
6 KB
Coderdev
1
10 апр 2026, 10:58
10 апр 2026, 10:58
47c7cf2
Код
Авторство
О чём код?
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lab7 · Task2</title> <link rel="stylesheet" href="../../css/main.css"> </head> <body> <div class="wrapper"> <a class="back-link" href="../">← Назад к лабе 7</a> <header class="header"> <div class="logo"> <div class="logo-mark">T2</div> <div class="logo-text"> <h1>Task 2 · Форма + API</h1> <p>ФИО, проект и GET-запросы к Fastify</p> </div> </div> <nav class="nav"> <a href="../../api/lab7/task2/makeInitials?lastname=Иванов&firstname=Иван&surname=Иванович" target="_blank" rel="noopener">Пример API</a> </nav> </header> <section class="grid-2"> <div class="form-card"> <h2>Форма</h2> <div class="row"> <div> <label for="lastname">Фамилия</label> <input type="text" id="lastname" placeholder="Например: Иванов"> </div> <div> <label for="firstname">Имя</label> <input type="text" id="firstname" placeholder="Например: Иван"> </div> <div> <label for="surname">Отчество</label> <input type="text" id="surname" placeholder="Например: Иванович"> </div> </div> <div style="margin-top:14px;"> <label>Пол</label> <div class="radio-group"> <label><input type="radio" name="gender" value="male" checked> Мужской</label> <label><input type="radio" name="gender" value="female"> Женский</label> </div> </div> <div style="margin-top:14px;"> <label for="faculty">Факультет</label> <select id="faculty"> <option value="ПИ">ПИ</option> <option value="ИТ">ИТ</option> <option value="ЭФ">ЭФ</option> <option value="Агрономия">Агрономия</option> </select> </div> <div class="checkbox-line"> <label><input type="checkbox" id="projectCheckbox"> Участие в проекте</label> </div> <div id="projectNameBlock" class="hidden"> <label for="projectName">Наименование проекта</label> <input type="text" id="projectName" placeholder="Введите название проекта"> </div> <div class="button-row" style="margin-top:16px;"> <button class="action-btn primary" id="saveBtn" type="button">Сохранить</button> <button class="action-btn secondary" id="statusBtn" type="button">Статус проекта</button> </div> <div class="status" id="status"></div> </div> <div class="result-card"> <h2>Ответ сервера</h2> <p class="api-hint">Ниже будет JSON-ответ от нужного endpoint.</p> <div class="result-box"> <pre id="result">{ "message": "Ожидание запроса" }</pre> </div> <div class="code-box" style="margin-top:14px;"> <pre id="urlPreview">../../api/lab7/task2/makeInitials</pre> </div> </div> </section> <div class="footer">© 2026 · Lab7 Task2</div> </div> <script> "use strict"; const lastnameInput = document.getElementById("lastname"); const firstnameInput = document.getElementById("firstname"); const surnameInput = document.getElementById("surname"); const projectCheckbox = document.getElementById("projectCheckbox"); const projectNameBlock = document.getElementById("projectNameBlock"); const projectNameInput = document.getElementById("projectName"); const saveBtn = document.getElementById("saveBtn"); const statusBtn = document.getElementById("statusBtn"); const statusEl = document.getElementById("status"); const resultEl = document.getElementById("result"); const urlPreview = document.getElementById("urlPreview"); projectCheckbox.addEventListener("change", () => { projectNameBlock.classList.toggle("hidden", !projectCheckbox.checked); updatePreview("status"); }); [lastnameInput, firstnameInput, surnameInput, projectNameInput].forEach((input) => { input.addEventListener("input", () => updatePreview("initials")); }); function getCommonParams() { return new URLSearchParams({ lastname: lastnameInput.value.trim(), firstname: firstnameInput.value.trim(), surname: surnameInput.value.trim() }); } function updatePreview(mode = "initials") { const params = getCommonParams(); if (mode === "status") { params.set("project", projectCheckbox.checked ? "true" : "false"); urlPreview.textContent = `../../api/lab7/task2/makeProjectStatus?${params.toString()}`; } else { urlPreview.textContent = `../../api/lab7/task2/makeInitials?${params.toString()}`; } } function validateBase() { if (!lastnameInput.value.trim() || !firstnameInput.value.trim() || !surnameInput.value.trim()) { statusEl.textContent = "Заполни все поля ФИО."; statusEl.className = "status error"; return false; } return true; } async function sendRequest(url) { statusEl.textContent = "Загрузка..."; statusEl.className = "status"; try { const response = await fetch(url); const data = await response.json(); if (!response.ok) { throw new Error(data.error || "Ошибка запроса"); } resultEl.textContent = JSON.stringify(data, null, 2); statusEl.textContent = "Готово."; statusEl.className = "status success"; } catch (error) { resultEl.textContent = JSON.stringify({ error: error.message }, null, 2); statusEl.textContent = "Не удалось получить ответ."; statusEl.className = "status error"; } } saveBtn.addEventListener("click", () => { if (!validateBase()) return; const url = `../../api/lab7/task2/makeInitials?${getCommonParams().toString()}`; updatePreview("initials"); sendRequest(url); }); statusBtn.addEventListener("click", () => { if (!validateBase()) return; const params = getCommonParams(); params.set("project", projectCheckbox.checked ? "true" : "false"); const url = `../../api/lab7/task2/makeProjectStatus?${params.toString()}`; updatePreview("status"); sendRequest(url); }); updatePreview(); </script> </body> </html>