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;
+    font-size: medium;
-    justify-self: center;
+    text-align: center;
-    grid-area: 1/12/ 1 / 1;
+}
 .main-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
 }
 .scheme-image{
-    grid-area: 2/1/6/5;
+    flex: 1;
-    width: 100%;
+    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);
 }
@@ -48,23 +94,27 @@ function getCalculations() {
    let heights = [];//base related, side realted
    let lengths = [];// base side
    let radius = 0;
-    let baseAngle=0;
+    let baseAngle = 0;
-    let sideAngle=0;
+    let sideAngle = 0;
    if (currentModeIsA) {
-        lengths[0]=2*Math.sin(deg2rad(inputsA.angle)/2)*inputsA.l;
+        lengths[0] = 2 * Math.sin(deg2rad(inputsA.angle) / 2) * inputsA.l;
-        lengths[1]=inputsA.l;
+        lengths[1] = inputsA.l;
-        baseAngle=inputsA.angle;
+        baseAngle = inputsA.angle;
-        sideAngle=(180-baseAngle)/2;
+        sideAngle = (180 - baseAngle) / 2;
    }
    else {
-        lengths[0]=inputsB.l;
+        lengths[0] = inputsB.l;
-        lengths[1]=inputsB.l/(2*Math.cos(deg2rad(inputsB.angle)));
+        lengths[1] = inputsB.l / (2 * Math.cos(deg2rad(inputsB.angle)));
-        sideAngle=inputsB.angle;
+        sideAngle = inputsB.angle;
-        baseAngle=180-2*sideAngle;
+        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) {
+function check180Angle(angleString) {
-    if (event.target.type === 'checkbox') {
+    let angle = parseFloat(angleString);
-        updateCheckboxes();
+    if (isNaN(angle)) {
        return "Введите корректное число";
    }
-});
+    if (angle <= 0) {
        return "Угол должен быть больше 0";
    }
    if (angle >= 180) {
        return "Угол должен быть меньше 180";
    }
    return "";
 }
-elements.inputsForm.addEventListener('change', function (event) {
+function check90Angle(angleString) {
-    if (event.target.type === 'radio') {
+    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
+        currentModeIsA = false;
-            switchAppearance(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)
@@ -169,22 +323,35 @@ 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