/
Coderdev
/
web-nodejs-labs
Обзор
Документация
Войти
/
Coderdev
/
web-nodejs-labs
Код
Запросы
0
Задачи
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
public/lab8/task3/index.html
84 строки
3 KB
Coderdev
1
12 май 2026, 12:34
12 май 2026, 12:34
f5e899f
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>ЛР8 — Задание 3</title> <style> body { font-family: sans-serif; max-width: 1000px; margin: 2em auto; } button { padding: 6px 16px; margin: 4px; } table { border-collapse: collapse; width: 100%; margin-top: 1em; font-size: 0.9em; } th, td { border: 1px solid #ccc; padding: 5px 10px; } th { background: #f0f0f0; } tr.draw { background-color: #fff9c4; } tr.team1 { background-color: #c8e6c9; } tr.team2 { background-color: #ffccbc; } .legend { margin-top: 0.5em; font-size: 0.85em; } .legend span { display: inline-block; padding: 2px 10px; margin-right: 8px; border: 1px solid #ccc; } .draw{background-color: #fff9c4;} .team1{ background-color: #c8e6c9; } .team2 { background-color: #ffccbc; } </style> </head> <body> <h1>ЛР8 — Задание 3: Таблица матчей ЧМ 2022</h1> <a href="/lab8/">← Назад</a> <div style="margin: 1em 0;"> <button onclick="loadResults()">Показать таблицу</button> <button onclick="rebuild()">Пересобрать JSON</button> </div> <div class="legend"> <span class="draw">Ничья</span> <span class="team1">Победа команды 1</span> <span class="team2">Победа команды 2</span> </div> <table id="resultsTable" style="display:none;"> <thead> <tr> <th>Группа</th> <th>Дата</th> <th>Команда 1</th> <th>Счёт</th> <th>Команда 2</th> <th>Стадион</th> </tr> </thead> <tbody id="resultsBody"></tbody> </table> <script> const API = '/api/lab8'; async function loadResults() { const res = await fetch(`${API}/task3/results`); const matches = await res.json(); const tbody = document.getElementById('resultsBody'); tbody.innerHTML = matches.map(m => ` <tr class="${m.result}"> <td>${m.group || '—'}</td> <td>${m.date}</td> <td>${m.team1}</td> <td><strong>${m.score}</strong></td> <td>${m.team2}</td> <td>${m.stadium}</td> </tr> `).join(''); document.getElementById('resultsTable').style.display = 'table'; } async function rebuild() { const res = await fetch(`${API}/task3/build`); const data = await res.json(); alert(data.message + ' Матчей: ' + data.count); await loadResults(); } </script> </body> </html>