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

97
hw/hw7/hw7.html
View File

@@ -10,53 +10,60 @@
<body>
<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="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="inputs" id="inputsForm">
<p>Выберете варинат входных данных:</p>
<input type="radio" name="input-type" id="radioButtonA" checked>
<label class="radio-label" for="radioButtonA">
<span>боковая сторона и угол при основании</span>
</label><br>
<input type="radio" name="input-type" id="radioButtonB">
<label class="radio-label" for="radioButtonB">
<span>основание и прилежащий к нему угол</span>
</label>
<form>
<fieldset id="inputTypeFieldsetA">
<legend>входные данные</legend>
<label for="equalSideLength">Длина боковой стороны:<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>
<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>
<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>
<input class="max-w" type="number" min="0" max="180" id="baseAdjacentAngle">
</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>
<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 class="controls-container">
<div class="inputs" id="inputsForm">
<p>Выберете варинат входных данных:</p>
<input type="radio" name="input-type" id="radioButtonA" checked>
<label class="radio-label" for="radioButtonA">
<span>боковая сторона и угол при основании</span>
</label><br>
<input type="radio" name="input-type" id="radioButtonB">
<label class="radio-label" for="radioButtonB">
<span>основание и прилежащий к нему угол</span>
</label>
<form>
<fieldset id="inputTypeFieldsetA">
<legend>входные данные</legend>
<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>
<input class="max-w" type="number" min="0" max="180" id="baseAngle">
</fieldset>
<fieldset id="inputTypeFieldsetB" class="hidden">
<legend>входные данные</legend>
<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>
<input class="max-w" type="number" min="0" max="180" id="baseAdjacentAngle">
</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>
<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>
<table class="outputs hidden" id="outputsTable">
</table>
</body>
<script src="./hw7.js">
</script>

12
hw/hw7/hw7.js
View File

@@ -166,19 +166,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;