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 195 additions and 93 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,7 +39,7 @@ p{
    line-height: 0;
 }
 .max-w{
-    width: 80%;
+    width: 100%;
 }

 .bad-input-tooltip {
@@ -47,8 +60,49 @@ p{
    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,18 +31,18 @@
                <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">
@@ -55,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
@@ -41,7 +41,7 @@ let inputsB = {
    angle: null
 };

-function highlightError(errorFieldIndex, add = true) {
+function highlightErrorElement(errorFieldIndex, add = true) {
    let fields = [
        elements.equalSideLength,
        elements.baseAngle,
@@ -69,7 +69,7 @@ function setErrTooltip(errorFieldIndex, tooltip) {
        elements.outputValuesErr
    ][errorFieldIndex];
    if (errElem) {
-        highlightError(errorFieldIndex, tooltip !== "");
+        highlightErrorElement(errorFieldIndex, tooltip !== "");

        if (tooltip !== "") {
            errElem.classList.remove("hidden");;
@@ -108,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 {
@@ -146,7 +150,7 @@ function updateCalculateButton() {
    elements.calculateButton.disabled = !ret;
 }

-function switchAppearance(selectA) {
+function switchInputs(selectA) {
    if (selectA) {
        elements.imageA.classList.remove("hidden");
        elements.imageB.classList.add("hidden");
@@ -166,19 +170,19 @@ function displayTable(calcResults) {
    let table = elements.outputsTable;
    table.innerHTML = ""; // Clear previous content

-    let header = "<tr><th>Parameter</th><th>Value</th></tr>";
+    let header = "<tr><th>Параметр</th><th>Значение</th></tr>";
    let rows = "";

    if (outputFields.radius) {
-        rows += `<tr><td>Radius</td><td>${calcResults.radius.toFixed(3)}</td></tr>`;
+        rows += `<tr><td>R</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>`;
+        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>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>`;
+        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;

@@ -190,10 +194,12 @@ function displayTable(calcResults) {

 }

-function clearInputs() {
+function clearCurrentInputs() {
    if (currentModeIsA) {
        elements.equalSideLength.value = null;
        elements.baseAngle.value = null;
+        setErrTooltip(0, "");
+        setErrTooltip(1, "");
        inputsA = {
            l: null,
            angle: null
@@ -204,12 +210,16 @@ function clearInputs() {
            l: null,
            angle: null
        };
+        setErrTooltip(2, "");
+        setErrTooltip(3, "");
        elements.baseSideLength.value = null;
        elements.baseAdjacentAngle.value = null;
    }
    elements.outputsTable.classList.add("hidden");
+    updateCalculateButton()
 }
-function checkAngle(angleString) {
+
+function check180Angle(angleString) {
    let angle = parseFloat(angleString);
    if (isNaN(angle)) {
        return "Введите корректное число";
@@ -223,6 +233,20 @@ function checkAngle(angleString) {
    return "";
 }

+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)) {
@@ -234,30 +258,20 @@ function checkLength(lengthString) {
    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);
+        switchInputs(true);
        console.log("Switching inputs to A");
    }
    else {
-        currentModeIsA = false
-        switchAppearance(false);
+        currentModeIsA = false;
+        switchInputs(false);
        console.log("Switching inputs to B");
-
    }
 }

-function HandleInputsUpdate(event) {
+function handleInputsUpdate(event) {
    switch (event.target.id) {
        case "equalSideLength":
            {
@@ -272,7 +286,7 @@ function HandleInputsUpdate(event) {
            break;
        case "baseAngle":
            {
-                const err = checkAngle(event.target.value);
+                const err = check180Angle(event.target.value);
                setErrTooltip(1, err);
                if (err === "") {
                    inputsA.angle = parseFloat(event.target.value);
@@ -294,7 +308,7 @@ function HandleInputsUpdate(event) {
            break;
        case "baseAdjacentAngle":
            {
-                const err = checkAngle(event.target.value);
+                const err = check90Angle(event.target.value);
                setErrTooltip(3, err);
                if (err === "") {
                    inputsB.angle = parseFloat(event.target.value);
@@ -311,28 +325,33 @@ function HandleInputsUpdate(event) {

 }

-function handleInputEvent(event) {
+function handleFieldsetEvent(event) {
    if (event.target.type === 'radio') {
        handleSwitchInputs(event);
    } else if (event.target.type === 'number') {
-        HandleInputsUpdate(event);
+        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();
    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