/
Coderdev
/
web-nodejs-labs
Обзор
Документация
Войти
/
Coderdev
/
web-nodejs-labs
Код
Запросы
0
Задачи
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
public/lab8/task1/index.html
133 строки
4 KB
Coderdev
1
12 май 2026, 12:34
12 май 2026, 12:34
f5e899f
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>ЛР8 — Задание 1</title> <style> body { font-family: sans-serif; max-width: 700px; margin: 2em auto; } label { display: block; margin-top: 0.7em; } input[type="text"] { width: 100%; padding: 4px; box-sizing: border-box; } #projectNameBlock { margin-top: 0.5em; } button { margin-top: 1em; padding: 6px 18px; } table { border-collapse: collapse; width: 100%; margin-top: 1em; } th, td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; } th { background: #f0f0f0; } .error { color: red; } </style> </head> <body> <h1>ЛР8 — Задание 1</h1> <a href="/lab8/">← Назад</a> <form id="studentForm"> <h2>Данные студента</h2> <label>Фамилия: <input type="text" name="lastname" required minlength="2"> </label> <label>Имя: <input type="text" name="firstname" required minlength="2"> </label> <label>Отчество: <input type="text" name="surname" required minlength="2"> </label> <label>Пол:</label> <label><input type="radio" name="gender" value="male" required> Мужской</label> <label><input type="radio" name="gender" value="female"> Женский</label> <label>Факультет: <select name="faculty"> <option value="ИТ">ИТ</option> <option value="ЭФ">ЭФ</option> <option value="МФ">МФ</option> <option value="ФМФ">ФМФ</option> </select> </label> <label> <input type="checkbox" id="inProjectCheck" name="inProject"> Участие в проекте </label> <div id="projectNameBlock" style="display:none;"> <label>Наименование проекта: <input type="text" name="projectName"> </label> </div> <button type="submit">Сохранить</button> <span id="msg" class="error"></span> </form> <h2>Сохранённые записи</h2> <table id="studentsTable"> <thead> <tr> <th>ID</th><th>Фамилия И.О.</th><th>Пол</th> <th>Факультет</th><th>Участие</th><th>Проект</th> </tr> </thead> <tbody id="studentsBody"></tbody> </table> <script> const API = '/api/lab8'; // Показываем/скрываем поле проекта document.getElementById('inProjectCheck').addEventListener('change', function() { document.getElementById('projectNameBlock').style.display = this.checked ? 'block' : 'none'; }); async function loadStudents() { const res = await fetch(`${API}/task1/students`); const list = await res.json(); const tbody = document.getElementById('studentsBody'); tbody.innerHTML = list.map(s => ` <tr> <td>${s.id}</td> <td>${s.lastname} ${s.firstname.charAt(0)}. ${s.surname.charAt(0)}.</td> <td>${s.gender === 'male' ? 'М' : 'Ж'}</td> <td>${s.faculty}</td> <td>${s.inProject ? 'Участвует' : 'Не участвует'}</td> <td>${s.projectName || '—'}</td> </tr> `).join(''); } document.getElementById('studentForm').addEventListener('submit', async e => { e.preventDefault(); const fd = new FormData(e.target); const body = { lastname: fd.get('lastname'), firstname: fd.get('firstname'), surname: fd.get('surname'), gender: fd.get('gender'), faculty: fd.get('faculty'), inProject: document.getElementById('inProjectCheck').checked, projectName: fd.get('projectName') || '' }; const res = await fetch(`${API}/task1/students`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }); const msg = document.getElementById('msg'); if (res.ok) { e.target.reset(); document.getElementById('projectNameBlock').style.display = 'none'; msg.textContent = ''; await loadStudents(); } else { const err = await res.json(); msg.textContent = 'Ошибка: ' + (err.message || JSON.stringify(err)); } }); loadStudents(); </script> </body> </html>