public/lab8/task3/index.html - main - Cooolprogrammers/web-nodejs-labs

public/lab8/task3/index.html

80 строк2 KB

darkvoid6@mail.ru

ЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫ

18 дек 2025, 07:59

18 дек 2025, 07:59f2c4f06

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>ЛР8 — Задание 3</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>

<header>
  <h1>Лабораторная №8 — Задание 3</h1>
  <p>Таблица матчей чемпионата мира 2022</p>
</header>

<div class="container">

  <button id="genBtn" class="btn">🔄 Сгенерировать результаты</button>
  <div id="status" class="status">Ожидание…</div>

  <table>
    <thead>
      <tr>
        <th>Группа</th>
        <th>Дата</th>
        <th>Время</th>
        <th>Команда 1</th>
        <th>Счёт</th>
        <th>Команда 2</th>
        <th>Стадион</th>
      </tr>
    </thead>
    <tbody id="tableBody"></tbody>
  </table>

</div>

<script>
async function load() {
  const data = await fetch("/api/lab8/task3/matches").then(r => r.json());
  const tbody = document.getElementById("tableBody");
  tbody.innerHTML = "";

  for (const m of data) {
    const row = document.createElement("tr");

    let cls = "";
    if (m.score1 === m.score2) cls = "draw";
    else if (m.score1 > m.score2) cls = "win1";
    else cls = "win2";

    row.className = cls;

    row.innerHTML = `
      <td>${m.group}</td>
      <td>${m.date}</td>
      <td>${m.time}</td>
      <td>${m.team1}</td>
      <td>${m.score1} : ${m.score2}</td>
      <td>${m.team2}</td>
      <td>${m.stadium}</td>
    `;
    tbody.appendChild(row);
  }
}

document.getElementById("genBtn").onclick = async () => {
  const st = document.getElementById("status");
  st.textContent = "⏳ Обработка...";
  const res = await fetch("/api/lab8/task3/generate").then(r => r.json());
  st.textContent = res.message;
  load();
};

load();
</script>

</body>
</html>