OkunElya/uni-web-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finishing touches

Browse Source
This commit is contained in:
OkunElya
2026-01-01 15:24:08 +10:00
parent c09b7b5769
commit 9fef1e5b0d
3 changed files with 126 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
hw/hw7/hw7.css
View File

@@ -1,22 +1,35 @@
.desctription-heading{ .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{ .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; min-width: 300px;
max-width: 300px;
} }
.outputs{ .outputs{
grid-area: 3/5/4/6;
min-width: 300px; min-width: 300px;
max-width: 300px;
} }
.radio-label{ .radio-label{
display: inline-block; display: inline-block;
@@ -26,7 +39,7 @@ p{
line-height: 0; line-height: 0;
} }
.max-w{ .max-w{
width: 80%; width: 100%;
} }
.bad-input-tooltip { .bad-input-tooltip {
@@ -47,8 +60,49 @@ p{
display: none; display: none;
} }
body{ body{
display: grid; display: flex;
flex-direction: column;
gap: 20px; 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%;
}
} }

97
hw/hw7/hw7.html
View File

@@ -10,53 +10,60 @@
<body> <body>
<h3 class="desctription-heading">калькулятор равнобедренного треугольника</h3> <h3 class="desctription-heading">калькулятор равнобедренного треугольника</h3>
<img src="./imgs/type1.png" class="scheme-image" id="schemeImageA">
<img src="./imgs/type2.png" class="scheme-image hidden" id="schemeImageB">
<div class="inputs" id="inputsForm"> <div class="main-container">
<p>Выберете варинат входных данных:</p> <div class="image-container">
<input type="radio" name="input-type" id="radioButtonA" checked> <img src="./imgs/type1.png" class="scheme-image" id="schemeImageA">
<label class="radio-label" for="radioButtonA"> <img src="./imgs/type2.png" class="scheme-image hidden" id="schemeImageB">
<span>боковая сторона и угол при основании</span> </div>
</label><br>
<input type="radio" name="input-type" id="radioButtonB"> <div class="controls-container">
<label class="radio-label" for="radioButtonB"> <div class="inputs" id="inputsForm">
<span>основание и прилежащий к нему угол</span> <p>Выберете варинат входных данных:</p>
</label> <input type="radio" name="input-type" id="radioButtonA" checked>
<form> <label class="radio-label" for="radioButtonA">
<fieldset id="inputTypeFieldsetA"> <span>боковая сторона и угол при основании</span>
<legend>входные данные</legend> </label><br>
<label for="equalSideLength">Длина боковой стороны:<span class="bad-input-tooltip hidden" id="equalSideLengthErr"></span></label><br> <input type="radio" name="input-type" id="radioButtonB">
<input class="max-w" type="number" min="0" id="equalSideLength"> <label class="radio-label" for="radioButtonB">
<br> <span>основание и прилежащий к нему угол</span>
<label for="baseAngle">Угол при основании (в градусах):<span class="bad-input-tooltip hidden" id="baseAngleErr"></span></label><br> </label>
<input class="max-w" type="number" min="0" max="180" id="baseAngle"> <form>
</fieldset> <fieldset id="inputTypeFieldsetA">
<fieldset id="inputTypeFieldsetB" class="hidden"> <legend>входные данные</legend>
<legend>входные данные</legend> <label for="equalSideLength">Длина боковой стороны B:<span class="bad-input-tooltip hidden" id="equalSideLengthErr"></span></label><br>
<label for="baseSideLength">Длина основания:<span class="bad-input-tooltip hidden" id="baseSideLengthErr"></span></label><br> <input class="max-w" type="number" min="0" id="equalSideLength">
<input class="max-w" type="number" min="0" id="baseSideLength"> <br>
<br> <label for="baseAngle">Угол при основании α (в градусах):<span class="bad-input-tooltip hidden" id="baseAngleErr"></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="baseAngle">
<input class="max-w" type="number" min="0" max="180" id="baseAdjacentAngle"> </fieldset>
</fieldset> <fieldset id="inputTypeFieldsetB" class="hidden">
<fieldset id="outputsFieldset"> <legend>входные данные</legend>
<legend>что вычислить</legend> <label for="baseSideLength">Длина основания A:<span class="bad-input-tooltip hidden" id="baseSideLengthErr"></span></label><br>
<span class="bad-input-tooltip hidden" id="outputValuesErr"><br></span> <input class="max-w" type="number" min="0" id="baseSideLength">
<input type="checkbox" name="output-valuesR" id="outputValuesR" checked> <br>
<label for="outputValuesR">радиус вписанной окружности</label><br> <label for="baseAdjacentAngle">Угол прилежащий основанию β:<span class="bad-input-tooltip hidden" id="baseAdjacentAngleErr"></span></label><br>
<input type="checkbox" name="output-valuesH" id="outputValuesH" checked> <input class="max-w" type="number" min="0" max="180" id="baseAdjacentAngle">
<label for="outputValuesH">высоты треугольника</label><br> </fieldset>
<input type="checkbox" name="output-valuesL" id="outputValuesL" checked> <fieldset id="outputsFieldset">
<label for="outputValuesL">длины сторон треугольника</label><br> <legend>что вычислить</legend>
</fieldset> <span class="bad-input-tooltip hidden" id="outputValuesErr"><br></span>
<button id="calculateButton" disabled>Вычислить</button> <input type="checkbox" name="output-valuesR" id="outputValuesR" checked>
<button id="clearButton">Отчислить</button> <label for="outputValuesR">радиус вписанной окружности</label><br>
</form> <input type="checkbox" name="output-valuesH" id="outputValuesH" checked>
<label for="outputValuesH">высоты треугольника</label><br>
<input type="checkbox" name="output-valuesL" id="outputValuesL" checked>
<label for="outputValuesL">длины сторон треугольника</label><br>
</fieldset>
<button id="calculateButton" disabled>Вычислить</button>
<button id="clearButton">Отчислить</button>
</form>
</div>
<table class="outputs hidden" id="outputsTable">
</table>
</div>
</div> </div>
<table class="outputs hidden" id="outputsTable">
</table>
</body> </body>
<script src="./hw7.js"> <script src="./hw7.js">
</script> </script>

12
hw/hw7/hw7.js
View File

@@ -166,19 +166,19 @@ function displayTable(calcResults) {
let table = elements.outputsTable; let table = elements.outputsTable;
table.innerHTML = ""; // Clear previous content 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 = ""; let rows = "";
if (outputFields.radius) { 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) { if (outputFields.heights) {
rows += `<tr><td>Height 1</td><td>${calcResults.heights[0].toFixed(3)}</td></tr>`; rows += `<tr><td>h1</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>h2</td><td>${calcResults.heights[1].toFixed(3)}</td></tr>`;
} }
if (outputFields.lengths) { if (outputFields.lengths) {
rows += `<tr><td>Length 1</td><td>${calcResults.lengths[0].toFixed(3)}</td></tr>`; rows += `<tr><td>A</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>B</td><td>${calcResults.lengths[1].toFixed(3)}</td></tr>`;
} }
table.innerHTML = header + rows; table.innerHTML = header + rows;