/
Cooolprogrammers
/
web-nodejs-labs
Обзор
Документация
Войти
/
Cooolprogrammers
/
web-nodejs-labs
Код
Запросы
0
Задачи
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
public/lab8/task1/index.html
160 строк
5 KB
darkvoid6@mail.ru
ЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫ
18 дек 2025, 07:59
18 дек 2025, 07:59
f2c4f06
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>ЛР8 — Задание 1</title> <link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet"> </head> <body> <div class="container"> <div class="card fade-in"> <h1>Лабораторная №8 — Задание 1</h1> <h2>Форма студента</h2> <form id="form"> <div class="form-row"> <label>Фамилия <input class="input" type="text" name="lastname" required> </label> <label>Имя <input class="input" type="text" name="firstname" required> </label> <label>Отчество <input class="input" type="text" name="middlename" required> </label> </div> <div class="form-row"> <div style="flex:1;"> <div class="help" style="margin-bottom:6px;">Пол</div> <div class="choice-group"> <label><input type="radio" name="gender" value="male" checked> Мужской</label> <label><input type="radio" name="gender" value="female"> Женский</label> <label><input type="radio" name="gender" value="other"> Другое</label> </div> </div> <div style="flex:1;"> <label>Факультет <select class="input" name="faculty" required> <option value="">Выберите...</option> <option value="ФИИТ">ФИИТ</option> <option value="ФЭИ">ФЭИ</option> <option value="ФБИ">ФБИ</option> </select> </label> </div> </div> <div class="form-row"> <label class="choice-group" style="margin-bottom:6px;"> <input type="checkbox" id="projectCheckbox"> Участие в проекте </label> <label id="projectNameWrap" style="display:none; width:100%;"> Наименование проекта <input class="input" name="projectName"> </label> </div> <div class="form-row" style="justify-content:space-between;"> <div class="help">После сохранения запись появится справа.</div> <div> <button type="reset" class="btn btn-ghost">Очистить</button> <button type="submit" class="btn btn-primary">Сохранить</button> </div> </div> </form> </div> <div class="card fade-in"> <h2 style="margin-bottom:4px;">Сохранённые записи</h2> <div class="msg" id="statusMessage">Загрузка…</div> <ul class="records" id="recordsList"></ul> </div> </div> <script> const cb = document.getElementById('projectCheckbox'); const projectWrap = document.getElementById('projectNameWrap'); cb.addEventListener('change', () => { projectWrap.style.display = cb.checked ? 'block' : 'none'; }); const form = document.getElementById('form'); form.addEventListener('submit', async (e) => { e.preventDefault(); const fd = new FormData(form); const params = new URLSearchParams(); params.set('lastname', fd.get('lastname')); params.set('firstname', fd.get('firstname')); params.set('middlename', fd.get('middlename')); params.set('gender', fd.get('gender')); params.set('faculty', fd.get('faculty')); params.set('projectParticipant', cb.checked ? 'true' : 'false'); if (cb.checked) { params.set('projectName', fd.get('projectName') || ''); } await fetch('/api/lab8/task1/save?' + params.toString()); form.reset(); projectWrap.style.display = 'none'; loadRecords(); }); async function loadRecords() { const list = document.getElementById('recordsList'); const msg = document.getElementById('statusMessage'); const res = await fetch('/api/lab8/task1/list'); const arr = await res.json(); if (!arr.length) { msg.textContent = 'Записей пока нет.'; list.innerHTML = ''; return; } msg.textContent = ''; list.innerHTML = arr.map(r => ` <li class="record fade-in"> <div class="meta">#${r.id}</div> <div class="content"> <strong>${r.lastname} ${r.firstname} ${r.middlename}</strong><br> <span class="help">${r.faculty}</span><br> ${r.projectParticipant ? `<span class="tag tag-yes">Участвует</span> — ${r.projectName}` : `<span class="tag tag-no">Не участвует</span>` } </div> </li> `).join(''); } loadRecords(); </script> </body> </html>