/
Coderdev
/
web-nodejs-labs
Обзор
Документация
Войти
/
Coderdev
/
web-nodejs-labs
Код
Запросы
0
Задачи
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
public/lab7/task1/index.html
144 строки
4 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 · Task1</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">T1</div> <div class="logo-text"> <h1>Task 1 · Калькулятор</h1> <p>Fastify API + GET-запросы</p> </div> </div> <nav class="nav"> <a href="../../api/lab7/calc?operation=add&a=2&b=3" target="_blank" rel="noopener">Пример API</a> </nav> </header> <section class="grid-2"> <div class="form-card"> <h2>Вычисление</h2> <div class="row"> <div> <label for="a">Число A</label> <input type="number" id="a" placeholder="Введите число A"> </div> <div> <label for="b">Число B</label> <input type="number" id="b" placeholder="Введите число B"> </div> </div> <div style="margin-top:14px;"> <label for="operation">Операция</label> <select id="operation"> <option value="add">Сложение (+)</option> <option value="subtract">Вычитание (-)</option> <option value="multiply">Умножение (*)</option> <option value="divide">Деление (/)</option> </select> </div> <div class="button-row" style="margin-top:16px;"> <button class="action-btn primary" id="calcBtn" type="button">Вычислить</button> <button class="action-btn" id="clearBtn" type="button">Очистить</button> </div> <div class="status" id="status"></div> </div> <div class="result-card"> <h2>Результат</h2> <p class="api-hint">Ответ API будет показан ниже.</p> <div class="result-box"> <pre id="result">{ "result": null }</pre> </div> </div> </section> <section class="api-card" style="margin-top:16px;"> <h2>Какой endpoint используется</h2> <div class="code-box"> <pre id="urlPreview">../../api/lab7/calc?operation=add&a=0&b=0</pre> </div> </section> <div class="footer">© 2026 · Lab7 Task1</div> </div> <script> "use strict"; const aInput = document.getElementById("a"); const bInput = document.getElementById("b"); const operationSelect = document.getElementById("operation"); const calcBtn = document.getElementById("calcBtn"); const clearBtn = document.getElementById("clearBtn"); const resultEl = document.getElementById("result"); const statusEl = document.getElementById("status"); const urlPreview = document.getElementById("urlPreview"); function buildUrl() { const operation = operationSelect.value; const a = aInput.value || 0; const b = bInput.value || 0; return `../../api/lab7/calc?operation=${encodeURIComponent(operation)}&a=${encodeURIComponent(a)}&b=${encodeURIComponent(b)}`; } function updatePreview() { urlPreview.textContent = buildUrl(); } aInput.addEventListener("input", updatePreview); bInput.addEventListener("input", updatePreview); operationSelect.addEventListener("change", updatePreview); calcBtn.addEventListener("click", async () => { statusEl.textContent = "Загрузка..."; statusEl.className = "status"; try { const response = await fetch(buildUrl()); 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"; } }); clearBtn.addEventListener("click", () => { aInput.value = ""; bInput.value = ""; operationSelect.value = "add"; resultEl.textContent = `{ "result": null }`; statusEl.textContent = ""; statusEl.className = "status"; updatePreview(); }); updatePreview(); </script> </body> </html>