diff --git a/hw/hw7/hw7.css b/hw/hw7/hw7.css index 80d9a8b..6f8d92f 100644 --- a/hw/hw7/hw7.css +++ b/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) ; -} \ No newline at end of file +} diff --git a/hw/hw7/hw7.html b/hw/hw7/hw7.html index 6ab2124..6505f93 100644 --- a/hw/hw7/hw7.html +++ b/hw/hw7/hw7.html @@ -40,6 +40,7 @@
что вычислить +
diff --git a/hw/hw7/hw7.js b/hw/hw7/hw7.js index d6cf24e..341b0cd 100644 --- 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 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 += "
" + } + 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 = "ParameterValue"; + let rows = ""; + + if (outputFields.radius) { + rows += `Radius${calcResults.radius.toFixed(3)}`; + } + if (outputFields.heights) { + rows += `Height 1${calcResults.heights[0].toFixed(3)}`; + rows += `Height 2${calcResults.heights[1].toFixed(3)}`; + } + if (outputFields.lengths) { + rows += `Length 1${calcResults.lengths[0].toFixed(3)}`; + rows += `Length 2${calcResults.lengths[1].toFixed(3)}`; + } + table.innerHTML = header + rows; + + if (rows === "") { + table.innerHTML = `

Выберите параметры для вычислений, сейчас таблица пустая

`; + } + + 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()); });