values checking added

tooltip for output fields added
math fixed
2026-01-01 14:04:53 +10:00 · 2026-01-01 13:52:51 +10:00 · 2025-12-31 22:13:22 +10:00 · 2025-12-31 20:42:21 +10:00
6 changed files with 454 additions and 0 deletions
--- a/hw/hw7/favicon.ico
+++ b/hw/hw7/favicon.ico
--- a/hw/hw7/hw7.css
+++ b/hw/hw7/hw7.css
@@ -0,0 +1,54 @@
+.desctription-heading{
+    display: block;
+    justify-self: center;
+    grid-area: 1/12/ 1 / 1;
+}
+
+.scheme-image{
+    grid-area: 2/1/6/5;
+    width: 100%;
+}
+.inputs{
+    grid-area: 2/5/3/6;
+    min-width: 300px;
+    max-width: 300px;
+}
+.outputs{
+    grid-area: 3/5/4/6;
+    min-width: 300px;
+    max-width: 300px;
+}
+.radio-label{
+    display: inline-block;
+}
+
+p{
+    line-height: 0;
+}
+.max-w{
+    width: 80%;
+}
+
+.bad-input-tooltip {
+    display: block;
+    background: #ffffff;    
+    color: #721c24;
+    border: 1px solid #8f0c19;
+    padding: 4px 8px;
+    max-width: 220px;
+    white-space: normal;
+}
+
+.bad-input-highlight {
+    outline: 2px solid #990917;
+}
+
+.hidden{
+    display: none;
+}
+body{
+    display: grid;
+    gap: 20px;
+    grid-template-columns: repeat(12,1fr);
+    grid-template-rows:repeat(6,min-content) ;
+}
--- a/hw/hw7/hw7.html
+++ b/hw/hw7/hw7.html
@@ -0,0 +1,62 @@
+<html>
+
+<head>
+    <title>калькулятор равнобедренного треугольника</title>
+    <link rel="stylesheet" href="./hw7.css">
+    <link rel="icon" href="favicon.ico">
+</head>
+
+<body>
+    <h3 class="desctription-heading">калькулятор равнобедренного треугольника</h3>
+    <img src="./imgs/type1.jpeg" class="scheme-image" id="schemeImageA">
+    <img src="./imgs/type2.jpeg" class="scheme-image hidden" id="schemeImageB">
+
+    <div class="inputs" id="inputsForm">
+        <p>Выберете варинат входных данных:</p>
+        <input type="radio" name="input-type" id="radioButtonA" checked>
+        <label class="radio-label" for="radioButtonA">
+            <span>боковая сторона и угол при основании</span>
+        </label><br>
+        <input type="radio" name="input-type" id="radioButtonB">
+        <label class="radio-label" for="radioButtonB">
+            <span>основание и прилежащий к нему угол</span>
+        </label>
+        <form>
+            <fieldset id="inputTypeFieldsetA">
+                <legend>входные данные</legend>
+                <label for="equalSideLength">Длина боковой стороны:<span class="bad-input-tooltip hidden" id="equalSideLengthErr"></span></label><br>
+                <input class="max-w" type="number" min="0" id="equalSideLength">
+                <br>
+                <label for="baseAngle">Угол при основании (в градусах):<span class="bad-input-tooltip hidden" id="baseAngleErr"></span></label><br>
+                <input class="max-w" type="number" min="0" max="180" id="baseAngle">
+            </fieldset>
+            <fieldset id="inputTypeFieldsetB" class="hidden">
+                <legend>входные данные</legend>
+                <label for="baseSideLength">Длина основания:<span class="bad-input-tooltip hidden" id="baseSideLengthErr"></span></label><br>
+                <input class="max-w" type="number" min="0" id="baseSideLength">
+                <br>
+                <label for="baseAdjacentAngle">Угол прилежащий основанию:<span class="bad-input-tooltip hidden" id="baseAdjacentAngleErr"></span></label><br>
+                <input class="max-w" type="number" min="0" max="180" id="baseAdjacentAngle">
+            </fieldset>
+            <fieldset id="outputsFieldset">
+                <legend>что вычислить</legend>
+                <span class="bad-input-tooltip hidden" id="outputValuesErr"><br></span>
+                <input type="checkbox" name="output-valuesR" id="outputValuesR" checked>
+                <label for="outputValuesR">радиус вписанной окружности</label><br>
+                <input type="checkbox" name="output-valuesH" id="outputValuesH" checked>
+                <label for="outputValuesH">высоты треугольника</label><br>
+                <input type="checkbox" name="output-valuesL" id="outputValuesL" checked>
+                <label for="outputValuesL">длины сторон треугольника</label><br>
+            </fieldset>
+            <button id="calculateButton" disabled>Вычислить</button>
+            <button id="clearButton">Отчислить</button>
+        </form>
+    </div>
+    <table class="outputs hidden" id="outputsTable">
+
+    </table>
+</body>
+<script src="./hw7.js">
+</script>
+
+</html>
--- a/hw/hw7/hw7.js
+++ b/hw/hw7/hw7.js
@@ -0,0 +1,338 @@
+let elements = {
+    radioA: document.getElementById('radioButtonA'),
+    radioB: document.getElementById('radioButtonB'),
+    fieldsetA: document.getElementById('inputTypeFieldsetA'),
+    fieldsetB: document.getElementById('inputTypeFieldsetB'),
+    imageA: document.getElementById('schemeImageA'),
+    imageB: document.getElementById('schemeImageB'),
+
+    inputsForm: document.getElementById('inputsForm'),
+
+    equalSideLength: document.getElementById('equalSideLength'),
+    equalSideLengthErr: document.getElementById('equalSideLengthErr'),
+    baseAngle: document.getElementById('baseAngle'),
+    baseAngleErr: document.getElementById('baseAngleErr'),
+    baseSideLength: document.getElementById('baseSideLength'),
+    baseSideLengthErr: document.getElementById('baseSideLengthErr'),
+    baseAdjacentAngle: document.getElementById('baseAdjacentAngle'),
+    baseAdjacentAngleErr: document.getElementById('baseAdjacentAngleErr'),
+
+    outputsFieldset: document.getElementById('outputsFieldset'),
+    outputValuesErr: document.getElementById('outputValuesErr'),
+    outputR: document.getElementById('outputValuesR'),
+    outputH: document.getElementById('outputValuesH'),
+    outputL: document.getElementById('outputValuesL'),
+    calculateButton: document.getElementById('calculateButton'),
+    clearButton: document.getElementById('clearButton'),
+    outputsTable: document.getElementById('outputsTable')
+}
+console.log("loaded js!");
+
+let currentModeIsA = true;
+let outputFields = {};
+
+let inputsA = {
+    l: null,
+    angle: null
+};
+
+let inputsB = {
+    l: null,
+    angle: null
+};
+
+function highlightError(errorFieldIndex, add = true) {
+    let fields = [
+        elements.equalSideLength,
+        elements.baseAngle,
+        elements.baseSideLength,
+        elements.baseAdjacentAngle,
+        outputsFieldset
+    ];
+    if (fields[errorFieldIndex]) {
+        if (add) {
+            fields[errorFieldIndex].classList.add("bad-input-highlight");
+        }
+        else {
+            fields[errorFieldIndex].classList.remove("bad-input-highlight");
+        }
+    }
+
+}
+
+function setErrTooltip(errorFieldIndex, tooltip) {
+    let errElem = [
+        elements.equalSideLengthErr,
+        elements.baseAngleErr,
+        elements.baseSideLengthErr,
+        elements.baseAdjacentAngleErr,
+        elements.outputValuesErr
+    ][errorFieldIndex];
+    if (errElem) {
+        highlightError(errorFieldIndex, tooltip !== "");
+
+        if (tooltip !== "") {
+            errElem.classList.remove("hidden");;
+        }
+        else {
+            errElem.classList.add("hidden");;
+        }
+        if (errorFieldIndex == 4) {
+            tooltip += "<br>"
+        }
+        errElem.innerHTML = tooltip;
+    }
+
+
+}
+
+function deg2rad(degrees) {
+    return degrees * (Math.PI / 180);
+}
+
+function getCalculations() {
+    let heights = [];//base related, side realted
+    let lengths = [];// base side
+    let radius = 0;
+    let baseAngle = 0;
+    let sideAngle = 0;
+    if (currentModeIsA) {
+        lengths[0] = 2 * Math.sin(deg2rad(inputsA.angle) / 2) * inputsA.l;
+        lengths[1] = inputsA.l;
+        baseAngle = inputsA.angle;
+        sideAngle = (180 - baseAngle) / 2;
+    }
+    else {
+        lengths[0] = inputsB.l;
+        lengths[1] = inputsB.l / (2 * Math.cos(deg2rad(inputsB.angle)));
+        sideAngle = inputsB.angle;
+        baseAngle = 180 - 2 * sideAngle;
+    }
+    radius = Math.sqrt(((2 * lengths[1]) - lengths[0]) / ((2 * lengths[1]) - lengths[0])) * lengths[0] / 2;
+
+
+    heights[0] = lengths[1] * Math.sin(deg2rad(sideAngle));
+    heights[1] = lengths[0] * Math.sin(deg2rad(baseAngle));
+    return {
+        radius: radius,
+        heights: heights,
+        lengths: lengths
+    };
+}
+
+function updateCheckboxes() {
+    outputFields["radius"] = elements.outputR.checked;
+    outputFields["heights"] = elements.outputH.checked;
+    outputFields["lengths"] = elements.outputL.checked;
+    let ret = !outputFields.radius && !outputFields.heights && !outputFields.lengths;
+    if (ret) {
+        setErrTooltip(4, "Выберите хотя бы один параметр для вывода.");
+    } else {
+        setErrTooltip(4, "");
+    }
+    updateCalculateButton();
+}
+
+function updateCalculateButton() {
+    let ret = false;
+    if (currentModeIsA) {
+        ret = inputsA["l"] !== null && inputsA["angle"] !== null
+    }
+    else {
+        ret = inputsB["l"] !== null && inputsB["angle"] !== null
+    }
+    ret &= elements.outputR.checked || elements.outputH.checked || elements.outputL.checked;
+
+    elements.calculateButton.disabled = !ret;
+}
+
+function switchAppearance(selectA) {
+    if (selectA) {
+        elements.imageA.classList.remove("hidden");
+        elements.imageB.classList.add("hidden");
+        elements.fieldsetA.classList.remove("hidden");
+        elements.fieldsetB.classList.add("hidden");
+    }
+    else {
+        elements.imageA.classList.add("hidden");
+        elements.imageB.classList.remove("hidden");
+        elements.fieldsetA.classList.add("hidden");
+        elements.fieldsetB.classList.remove("hidden");
+    }
+    updateCalculateButton();
+}
+
+function displayTable(calcResults) {
+    let table = elements.outputsTable;
+    table.innerHTML = ""; // Clear previous content
+
+    let header = "<tr><th>Parameter</th><th>Value</th></tr>";
+    let rows = "";
+
+    if (outputFields.radius) {
+        rows += `<tr><td>Radius</td><td>${calcResults.radius.toFixed(3)}</td></tr>`;
+    }
+    if (outputFields.heights) {
+        rows += `<tr><td>Height 1</td><td>${calcResults.heights[0].toFixed(3)}</td></tr>`;
+        rows += `<tr><td>Height 2</td><td>${calcResults.heights[1].toFixed(3)}</td></tr>`;
+    }
+    if (outputFields.lengths) {
+        rows += `<tr><td>Length 1</td><td>${calcResults.lengths[0].toFixed(3)}</td></tr>`;
+        rows += `<tr><td>Length 2</td><td>${calcResults.lengths[1].toFixed(3)}</td></tr>`;
+    }
+    table.innerHTML = header + rows;
+
+    if (rows === "") {
+        table.innerHTML = `<h3>Выберите параметры для вычислений, сейчас таблица пустая</h3>`;
+    }
+
+    table.classList.remove("hidden");
+
+}
+
+function clearInputs() {
+    if (currentModeIsA) {
+        elements.equalSideLength.value = null;
+        elements.baseAngle.value = null;
+        inputsA = {
+            l: null,
+            angle: null
+        };
+    }
+    else {
+        inputsB = {
+            l: null,
+            angle: null
+        };
+        elements.baseSideLength.value = null;
+        elements.baseAdjacentAngle.value = null;
+    }
+    elements.outputsTable.classList.add("hidden");
+}
+function checkAngle(angleString) {
+    let angle = parseFloat(angleString);
+    if (isNaN(angle)) {
+        return "Введите корректное число";
+    }
+    if (angle <= 0) {
+        return "Угол должен быть больше 0";
+    }
+    if (angle >= 180) {
+        return "Угол должен быть меньше 180";
+    }
+    return "";
+}
+
+function checkLength(lengthString) {
+    let length = parseFloat(lengthString);
+    if (!isFinite(length)) {
+        return "Введите корректное число";
+    }
+    if (length <= 0) {
+        return "Длина должна быть больше 0";
+    }
+    return "";
+}
+
+elements.outputsFieldset.addEventListener('change', function (event) {
+    if (event.target.type === 'checkbox') {
+        updateCheckboxes();
+    }
+});
+
+elements.inputsForm.addEventListener('change', handleInputEvent);
+elements.inputsForm.addEventListener('input', handleInputEvent);
+
+function handleSwitchInputs(event) {
+    if (event.target.id[event.target.id.length - 1].toLowerCase() == "a") {
+        currentModeIsA = true;
+        switchAppearance(true);
+        console.log("Switching inputs to A");
+    }
+    else {
+        currentModeIsA = false
+        switchAppearance(false);
+        console.log("Switching inputs to B");
+
+    }
+}
+
+function HandleInputsUpdate(event) {
+    switch (event.target.id) {
+        case "equalSideLength":
+            {
+                const err = checkLength(event.target.value);
+                setErrTooltip(0, err);
+                if (err === "") {
+                    inputsA.l = parseFloat(event.target.value);
+                } else {
+                    inputsA.l = null;
+                }
+            }
+            break;
+        case "baseAngle":
+            {
+                const err = checkAngle(event.target.value);
+                setErrTooltip(1, err);
+                if (err === "") {
+                    inputsA.angle = parseFloat(event.target.value);
+                } else {
+                    inputsA.angle = null;
+                }
+            }
+            break;
+        case "baseSideLength":
+            {
+                const err = checkLength(event.target.value);
+                setErrTooltip(2, err);
+                if (err === "") {
+                    inputsB.l = parseFloat(event.target.value);
+                } else {
+                    inputsB.l = null;
+                }
+            }
+            break;
+        case "baseAdjacentAngle":
+            {
+                const err = checkAngle(event.target.value);
+                setErrTooltip(3, err);
+                if (err === "") {
+                    inputsB.angle = parseFloat(event.target.value);
+                } else {
+                    inputsB.angle = null;
+                }
+            }
+            break;
+        default:
+            console.log(event.target.id)
+            break;
+    }
+    updateCalculateButton();
+
+}
+
+function handleInputEvent(event) {
+    if (event.target.type === 'radio') {
+        handleSwitchInputs(event);
+    } else if (event.target.type === 'number') {
+        HandleInputsUpdate(event);
+    }
+}
+
+
+elements.clearButton.addEventListener('click', (event) => {
+    event.preventDefault();
+    clearInputs()
+});
+
+
+elements.calculateButton.addEventListener('click', (event) => {
+    event.preventDefault();
+    displayTable(getCalculations());
+});
+
+
+
+// чтобы не сконфузило
+updateCheckboxes();
+switchAppearance(elements.radioA.checked);
--- a/hw/hw7/imgs/type1.jpeg
+++ b/hw/hw7/imgs/type1.jpeg
--- a/hw/hw7/imgs/type2.jpeg
+++ b/hw/hw7/imgs/type2.jpeg
Author	SHA1	Message	Date
OkunElya	9e5950490a	values checking added	2026-01-01 14:04:53 +10:00
OkunElya	26bc727758	tooltip for output fields added	2026-01-01 13:52:51 +10:00
OkunElya	04db81b55a	math fixed	2025-12-31 22:13:22 +10:00
OkunElya	4ab5967abe	basic structure created	2025-12-31 20:42:21 +10:00