lab7 added

math fixed
finishing touches
2026-01-09 19:36:55 +10:00 · 2026-01-01 15:57:09 +10:00 · 2026-01-01 15:24:08 +10:00 · 2026-01-01 15:05:20 +10:00 · 2026-01-01 14:37:53 +10:00 · 2026-01-01 14:17:34 +10:00
8 changed files with 381 additions and 116 deletions
--- a/hw/hw7/hw7.css
+++ b/hw/hw7/hw7.css
@@ -1,22 +1,35 @@
 .desctription-heading{
-    display: block;
-    justify-self: center;
-    grid-area: 1/12/ 1 / 1;
+    font-size: medium;
+    text-align: center;
+}
+
+.main-container {
+    display: flex;
+    gap: 20px;
+    align-items: flex-start;
 }

 .scheme-image{
-    grid-area: 2/1/6/5;
-    width: 100%;
+    flex: 1;
+    max-width: 400px;
+    height: auto;
+    object-fit: contain;
 }
-.inputs{
-    grid-area: 2/5/3/6;
+
+.controls-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    flex: 1;
+    min-width: 300px;
+    max-width: 400px;
+}
+
+.inputs{
    min-width: 300px;
-    max-width: 300px;
 }
 .outputs{
-    grid-area: 3/5/4/6;
    min-width: 300px;
-    max-width: 300px;
 }
 .radio-label{
    display: inline-block;
@@ -26,15 +39,70 @@ p{
    line-height: 0;
 }
 .max-w{
-    width: 80%;
+    width: 100%;
+}
+
+.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;
+    display: flex;
+    flex-direction: column;
    gap: 20px;
-    grid-template-columns: repeat(12,1fr);
-    grid-template-rows:repeat(6,min-content) ;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 16px 0;
+}
+
+th, td {
+    border: 1px solid #ccc;
+    text-align: left;
+}
+
+th {
+    background-color: #f5f5f5;
+    font-weight: bold;
+}
+
+tr:nth-child(even) {
+    background-color: #fafafa;
+}
+
+@media (max-width: 800px) {
+    .main-container {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .scheme-image {
+        max-width: 100%;
+        width: 100%;
+    }
+    
+    .controls-container {
+        width: 100%;
+        max-width: none;
+    }
+    
+    .inputs, .outputs {
+        min-width: unset;
+        width: 100%;
+    }
 }
--- a/hw/hw7/hw7.html
+++ b/hw/hw7/hw7.html
@@ -4,13 +4,20 @@
    <title>калькулятор равнобедренного треугольника</title>
    <link rel="stylesheet" href="./hw7.css">
    <link rel="icon" href="favicon.ico">
+    <link rel="stylesheet" href="https://unpkg.com/xp.css/dist/98.css"
+>
 </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="main-container">
+        <div class="image-container">
+            <img src="./imgs/type1.png" class="scheme-image" id="schemeImageA">
+            <img src="./imgs/type2.png" class="scheme-image hidden" id="schemeImageB">
+        </div>
+
+        <div class="controls-container">
            <div class="inputs" id="inputsForm">
                <p>Выберете варинат входных данных:</p>
                <input type="radio" name="input-type" id="radioButtonA" checked>
@@ -24,22 +31,23 @@
                <form>
                    <fieldset id="inputTypeFieldsetA">
                        <legend>входные данные</legend>
-                <label for="equalSideLength">Длина боковой стороны:<span class="bad-input-tooltip hidden" id="equalSideLengthErr"></span></label><br>
+                        <label for="equalSideLength">Длина боковой стороны B:<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>
+                        <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>
+                        <label for="baseSideLength">Длина основания A:<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>
+                        <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>
@@ -54,6 +62,8 @@
            <table class="outputs hidden" id="outputsTable">

            </table>
+        </div>
+    </div>
 </body>
 <script src="./hw7.js">
 </script>
--- a/hw/hw7/hw7.js
+++ b/hw/hw7/hw7.js
@@ -18,6 +18,7 @@ let elements = {
    baseAdjacentAngleErr: document.getElementById('baseAdjacentAngleErr'),

    outputsFieldset: document.getElementById('outputsFieldset'),
+    outputValuesErr: document.getElementById('outputValuesErr'),
    outputR: document.getElementById('outputValuesR'),
    outputH: document.getElementById('outputValuesH'),
    outputL: document.getElementById('outputValuesL'),
@@ -40,6 +41,51 @@ let inputsB = {
    angle: null
 };

+function highlightErrorElement(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) {
+        highlightErrorElement(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);
 }
@@ -62,9 +108,13 @@ function getCalculations() {
        sideAngle = inputsB.angle;
        baseAngle = 180 - 2 * sideAngle;
    }
-    radius = Math.sqrt(((2 * lengths[1]) - lengths[0]) / ((2 * lengths[1]) - lengths[0])) * lengths[0] / 2;
    

+    let a = lengths[0]; 
+    let b = lengths[1]; 
+    let p = (a + b + b) / 2;
+    radius = Math.sqrt((p - a) * (p - b) * (p - b) / p);
+
    heights[0] = lengths[1] * Math.sin(deg2rad(sideAngle));
    heights[1] = lengths[0] * Math.sin(deg2rad(baseAngle));
    return {
@@ -78,7 +128,13 @@ function updateCheckboxes() {
    outputFields["radius"] = elements.outputR.checked;
    outputFields["heights"] = elements.outputH.checked;
    outputFields["lengths"] = elements.outputL.checked;
-    console.log("output fields:", outputFields)
+    let ret = !outputFields.radius && !outputFields.heights && !outputFields.lengths;
+    if (ret) {
+        setErrTooltip(4, "Выберите хотя бы один параметр для вывода.");
+    } else {
+        setErrTooltip(4, "");
+    }
+    updateCalculateButton();
 }

 function updateCalculateButton() {
@@ -89,11 +145,12 @@ function updateCalculateButton() {
    else {
        ret = inputsB["l"] !== null && inputsB["angle"] !== null
    }
-    console.log(inputsA, inputsB, ret);
+    ret &= elements.outputR.checked || elements.outputH.checked || elements.outputL.checked;
+
    elements.calculateButton.disabled = !ret;
 }

-function switchAppearance(selectA) {
+function switchInputs(selectA) {
    if (selectA) {
        elements.imageA.classList.remove("hidden");
        elements.imageB.classList.add("hidden");
@@ -109,11 +166,40 @@ function switchAppearance(selectA) {
    updateCalculateButton();
 }

+function displayTable(calcResults) {
+    let table = elements.outputsTable;
+    table.innerHTML = ""; // Clear previous content

-function clearInputs() {
+    let header = "<tr><th>Параметр</th><th>Значение</th></tr>";
+    let rows = "";
+
+    if (outputFields.radius) {
+        rows += `<tr><td>R</td><td>${calcResults.radius.toFixed(3)}</td></tr>`;
+    }
+    if (outputFields.heights) {
+        rows += `<tr><td>h1</td><td>${calcResults.heights[0].toFixed(3)}</td></tr>`;
+        rows += `<tr><td>h2</td><td>${calcResults.heights[1].toFixed(3)}</td></tr>`;
+    }
+    if (outputFields.lengths) {
+        rows += `<tr><td>A</td><td>${calcResults.lengths[0].toFixed(3)}</td></tr>`;
+        rows += `<tr><td>B</td><td>${calcResults.lengths[1].toFixed(3)}</td></tr>`;
+    }
+    table.innerHTML = header + rows;
+
+    if (rows === "") {
+        table.innerHTML = `<h3>Выберите параметры для вычислений, сейчас таблица пустая</h3>`;
+    }
+
+    table.classList.remove("hidden");
+
+}
+
+function clearCurrentInputs() {
    if (currentModeIsA) {
        elements.equalSideLength.value = null;
        elements.baseAngle.value = null;
+        setErrTooltip(0, "");
+        setErrTooltip(1, "");
        inputsA = {
            l: null,
            angle: null
@@ -124,44 +210,112 @@ function clearInputs() {
            l: null,
            angle: null
        };
+        setErrTooltip(2, "");
+        setErrTooltip(3, "");
        elements.baseSideLength.value = null;
        elements.baseAdjacentAngle.value = null;
    }
    elements.outputsTable.classList.add("hidden");
+    updateCalculateButton()
 }

-elements.outputsFieldset.addEventListener('change', function (event) {
-    if (event.target.type === 'checkbox') {
-        updateCheckboxes();
+function check180Angle(angleString) {
+    let angle = parseFloat(angleString);
+    if (isNaN(angle)) {
+        return "Введите корректное число";
+    }
+    if (angle <= 0) {
+        return "Угол должен быть больше 0";
+    }
+    if (angle >= 180) {
+        return "Угол должен быть меньше 180";
+    }
+    return "";
 }
-});

-elements.inputsForm.addEventListener('change', function (event) {
-    if (event.target.type === 'radio') {
+function check90Angle(angleString) {
+    let angle = parseFloat(angleString);
+    if (isNaN(angle)) {
+        return "Введите корректное число";
+    }
+    if (angle <= 0) {
+        return "Угол должен быть больше 0";
+    }
+    if (angle >= 90) {
+        return "Угол должен быть меньше 90";
+    }
+    return "";
+}
+
+function checkLength(lengthString) {
+    let length = parseFloat(lengthString);
+    if (!isFinite(length)) {
+        return "Введите корректное число";
+    }
+    if (length <= 0) {
+        return "Длина должна быть больше 0";
+    }
+    return "";
+}
+
+function handleSwitchInputs(event) {
    if (event.target.id[event.target.id.length - 1].toLowerCase() == "a") {
        currentModeIsA = true;
-            switchAppearance(true);
+        switchInputs(true);
        console.log("Switching inputs to A");
    }
    else {
-            currentModeIsA = false
-            switchAppearance(false);
+        currentModeIsA = false;
+        switchInputs(false);
        console.log("Switching inputs to B");
-
    }
-    } else if (event.target.type === 'number') {
+}
+
+function handleInputsUpdate(event) {
    switch (event.target.id) {
        case "equalSideLength":
-                inputsA.l = parseFloat(event.target.value) || 0;
+            {
+                const err = checkLength(event.target.value);
+                setErrTooltip(0, err);
+                if (err === "") {
+                    inputsA.l = parseFloat(event.target.value);
+                } else {
+                    inputsA.l = null;
+                }
+            }
            break;
        case "baseAngle":
-                inputsA.angle = parseFloat(event.target.value) || 0;
+            {
+                const err = check180Angle(event.target.value);
+                setErrTooltip(1, err);
+                if (err === "") {
+                    inputsA.angle = parseFloat(event.target.value);
+                } else {
+                    inputsA.angle = null;
+                }
+            }
            break;
        case "baseSideLength":
-                inputsB.l = parseFloat(event.target.value) || 0;
+            {
+                const err = checkLength(event.target.value);
+                setErrTooltip(2, err);
+                if (err === "") {
+                    inputsB.l = parseFloat(event.target.value);
+                } else {
+                    inputsB.l = null;
+                }
+            }
            break;
        case "baseAdjacentAngle":
-                inputsB.angle = parseFloat(event.target.value) || 0;
+            {
+                const err = check90Angle(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)
@@ -170,21 +324,34 @@ elements.inputsForm.addEventListener('change', function (event) {
    updateCalculateButton();

 }
+
+function handleFieldsetEvent(event) {
+    if (event.target.type === 'radio') {
+        handleSwitchInputs(event);
+    } else if (event.target.type === 'number') {
+        handleInputsUpdate(event);
+    }
+}
+elements.inputsForm.addEventListener('change', handleFieldsetEvent);
+elements.inputsForm.addEventListener('input', handleFieldsetEvent);
+
+elements.outputsFieldset.addEventListener('change', (event) => {
+    if (event.target.type === 'checkbox') {
+        updateCheckboxes();
+    }
 });

 elements.clearButton.addEventListener('click', (event) => {
    event.preventDefault();
-    clearInputs()
+    clearCurrentInputs()
 });

-
 elements.calculateButton.addEventListener('click', (event) => {
    event.preventDefault();
-    console.log(getCalculations());
+    displayTable(getCalculations());
 });


-
 // чтобы не сконфузило
 updateCheckboxes();
-switchAppearance(elements.radioA.checked);
+switchInputs(elements.radioA.checked);
--- a/hw/hw7/imgs/type1.jpeg
+++ b/hw/hw7/imgs/type1.jpeg
--- a/hw/hw7/imgs/type1.png
+++ b/hw/hw7/imgs/type1.png
--- a/hw/hw7/imgs/type2.jpeg
+++ b/hw/hw7/imgs/type2.jpeg
--- a/hw/hw7/imgs/type2.png
+++ b/hw/hw7/imgs/type2.png
--- a/labs/lab7/lab7.html
+++ b/labs/lab7/lab7.html
@@ -0,0 +1,20 @@
+<body>
+   <h3>Языки программирования</h3>
+   <ul>
+    <li><a href ="">Python</a></li>
+    <li><a href ="">C</a></li>
+    <li><a id="test" href ="">Java</a></li>
+    <li><a href ="">JavaScript</a></li>
+   </ul>
+</body>
+<script>
+    let elem = document.getElementById("test");
+    elem = elem.parentNode;
+
+    while(elem.parentElement!==null){
+        let newElem =document.createElement(elem.children[0].tagName);
+        newElem.innerHTML= "Новый Элемент";
+        elem.appendChild(newElem);
+        elem=elem.parentNode;
+    }
+</script>
Author	SHA1	Message	Date
OkunElya	011e19e531	lab7 added	2026-01-09 19:36:55 +10:00
OkunElya	5d7ecb1f13	math fixed	2026-01-01 15:57:09 +10:00
OkunElya	9fef1e5b0d	finishing touches	2026-01-01 15:24:08 +10:00
OkunElya	c09b7b5769	images fixed	2026-01-01 15:05:20 +10:00
OkunElya	cf80fd251e	small refactor	2026-01-01 14:37:53 +10:00
OkunElya	46e3696d85	reset bug fixed	2026-01-01 14:17:34 +10:00
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