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%;
}
} }

15
hw/hw7/hw7.html
View File

@@ -10,9 +10,14 @@
<body> <body>
<h3 class="desctription-heading">калькулятор равнобедренного треугольника</h3> <h3 class="desctription-heading">калькулятор равнобедренного треугольника</h3>
<div class="main-container">
<div class="image-container">
<img src="./imgs/type1.png" class="scheme-image" id="schemeImageA"> <img src="./imgs/type1.png" class="scheme-image" id="schemeImageA">
<img src="./imgs/type2.png" class="scheme-image hidden" id="schemeImageB"> <img src="./imgs/type2.png" class="scheme-image hidden" id="schemeImageB">
</div>
<div class="controls-container">
<div class="inputs" id="inputsForm"> <div class="inputs" id="inputsForm">
<p>Выберете варинат входных данных:</p> <p>Выберете варинат входных данных:</p>
<input type="radio" name="input-type" id="radioButtonA" checked> <input type="radio" name="input-type" id="radioButtonA" checked>
@@ -26,18 +31,18 @@
<form> <form>
<fieldset id="inputTypeFieldsetA"> <fieldset id="inputTypeFieldsetA">
<legend>входные данные</legend> <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"> <input class="max-w" type="number" min="0" id="equalSideLength">
<br> <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"> <input class="max-w" type="number" min="0" max="180" id="baseAngle">
</fieldset> </fieldset>
<fieldset id="inputTypeFieldsetB" class="hidden"> <fieldset id="inputTypeFieldsetB" class="hidden">
<legend>входные данные</legend> <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"> <input class="max-w" type="number" min="0" id="baseSideLength">
<br> <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"> <input class="max-w" type="number" min="0" max="180" id="baseAdjacentAngle">
</fieldset> </fieldset>
<fieldset id="outputsFieldset"> <fieldset id="outputsFieldset">
@@ -57,6 +62,8 @@
<table class="outputs hidden" id="outputsTable"> <table class="outputs hidden" id="outputsTable">
</table> </table>
</div>
</div>
</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;