tooltip for output fields added

hw/hw7/hw7.css

@@ -29,6 +29,20 @@ p{
     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;
 }
@@ -37,4 +51,4 @@ body{
     gap: 20px;
     grid-template-columns: repeat(12,1fr);
     grid-template-rows:repeat(6,min-content) ;
-}
+}

hw/hw7/hw7.html

@@ -40,6 +40,7 @@
             </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>

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 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);
 }
@@ -48,22 +94,22 @@ function getCalculations() {
     let heights = [];//base related, side realted
     let lengths = [];// base side
     let radius = 0;
-    let baseAngle=0;
-    let sideAngle=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;
+        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;
+        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));
@@ -78,7 +124,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,7 +141,8 @@ 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;
 }
 
@@ -109,6 +162,33 @@ function switchAppearance(selectA) {
     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) {
@@ -180,7 +260,7 @@ elements.clearButton.addEventListener('click', (event) => {
 
 elements.calculateButton.addEventListener('click', (event) => {
     event.preventDefault();
-    console.log(getCalculations());
+    displayTable(getCalculations());
 });