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

Compare commits

base: OkunElya:9e5950490a7d87b9fdc356439591a2e6cb206c14
Branches Tags
OkunElya:main OkunElya:sem2-lab7-hw7 OkunElya:sem2-lab6-hw6 OkunElya:sem2-lab8-hw8 OkunElya:sem2-lab4-hw4 OkunElya:sem2-lab3-hw3 OkunElya:sem2-lab2-hw2 OkunElya:sem2-lab1-hw1 OkunElya:hw7 OkunElya:lectures-walkthrough OkunElya:hw6 OkunElya:lab6 OkunElya:hw5 OkunElya:hw3 OkunElya:hw4 OkunElya:lab4
..
compare: OkunElya:hw7
Branches Tags
OkunElya:main OkunElya:sem2-lab7-hw7 OkunElya:sem2-lab6-hw6 OkunElya:sem2-lab8-hw8 OkunElya:sem2-lab4-hw4 OkunElya:sem2-lab3-hw3 OkunElya:sem2-lab2-hw2 OkunElya:sem2-lab1-hw1 OkunElya:hw7 OkunElya:lectures-walkthrough OkunElya:hw6 OkunElya:lab6 OkunElya:hw5 OkunElya:hw3 OkunElya:hw4 OkunElya:lab4

6 Commits
9e5950490a ... hw7

Author SHA1 Message Date
OkunElya
011e19e531 lab7 added 2026-01-09 19:36:55 +10:00
OkunElya
5d7ecb1f13 math fixed 2026-01-01 15:57:09 +10:00
OkunElya
9fef1e5b0d finishing touches 2026-01-01 15:24:08 +10:00
OkunElya
c09b7b5769 images fixed 2026-01-01 15:05:20 +10:00
OkunElya
cf80fd251e small refactor 2026-01-01 14:37:53 +10:00
OkunElya
46e3696d85 reset bug fixed 2026-01-01 14:17:34 +10:00
8 changed files with 195 additions and 93 deletions
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%;
}
} }

99
hw/hw7/hw7.html
View File

@@ -4,57 +4,66 @@
<title>калькулятор равнобедренного треугольника</title> <title>калькулятор равнобедренного треугольника</title>
<link rel="stylesheet" href="./hw7.css"> <link rel="stylesheet" href="./hw7.css">
<link rel="icon" href="favicon.ico"> <link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/xp.css/dist/98.css"
>
</head> </head>
<body> <body>
<h3 class="desctription-heading">калькулятор равнобедренного треугольника</h3> <h3 class="desctription-heading">калькулятор равнобедренного треугольника</h3>
<img src="./imgs/type1.jpeg" class="scheme-image" id="schemeImageA">
<img src="./imgs/type2.jpeg" 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>

87
hw/hw7/hw7.js
View File

@@ -41,7 +41,7 @@ let inputsB = {
angle: null angle: null
}; };
function highlightError(errorFieldIndex, add = true) { function highlightErrorElement(errorFieldIndex, add = true) {
let fields = [ let fields = [
elements.equalSideLength, elements.equalSideLength,
elements.baseAngle, elements.baseAngle,
@@ -69,7 +69,7 @@ function setErrTooltip(errorFieldIndex, tooltip) {
elements.outputValuesErr elements.outputValuesErr
][errorFieldIndex]; ][errorFieldIndex];
if (errElem) { if (errElem) {
highlightError(errorFieldIndex, tooltip !== ""); highlightErrorElement(errorFieldIndex, tooltip !== "");
if (tooltip !== "") { if (tooltip !== "") {
errElem.classList.remove("hidden");; errElem.classList.remove("hidden");;
@@ -108,9 +108,13 @@ function getCalculations() {
sideAngle = inputsB.angle; sideAngle = inputsB.angle;
baseAngle = 180 - 2 * sideAngle; baseAngle = 180 - 2 * sideAngle;
} }
radius = Math.sqrt(((2 * lengths[1]) - lengths[0]) / ((2 * lengths[1]) - lengths[0])) * lengths[0] / 2;
let a = lengths[0];
let b = lengths[1];
let p = (a + b + b) / 2;
radius = Math.sqrt((p - a) * (p - b) * (p - b) / p);
heights[0] = lengths[1] * Math.sin(deg2rad(sideAngle)); heights[0] = lengths[1] * Math.sin(deg2rad(sideAngle));
heights[1] = lengths[0] * Math.sin(deg2rad(baseAngle)); heights[1] = lengths[0] * Math.sin(deg2rad(baseAngle));
return { return {
@@ -146,7 +150,7 @@ function updateCalculateButton() {
elements.calculateButton.disabled = !ret; elements.calculateButton.disabled = !ret;
} }
function switchAppearance(selectA) { function switchInputs(selectA) {
if (selectA) { if (selectA) {
elements.imageA.classList.remove("hidden"); elements.imageA.classList.remove("hidden");
elements.imageB.classList.add("hidden"); elements.imageB.classList.add("hidden");
@@ -166,19 +170,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;
@@ -190,10 +194,12 @@ function displayTable(calcResults) {
} }
function clearInputs() { function clearCurrentInputs() {
if (currentModeIsA) { if (currentModeIsA) {
elements.equalSideLength.value = null; elements.equalSideLength.value = null;
elements.baseAngle.value = null; elements.baseAngle.value = null;
setErrTooltip(0, "");
setErrTooltip(1, "");
inputsA = { inputsA = {
l: null, l: null,
angle: null angle: null
@@ -204,12 +210,16 @@ function clearInputs() {
l: null, l: null,
angle: null angle: null
}; };
setErrTooltip(2, "");
setErrTooltip(3, "");
elements.baseSideLength.value = null; elements.baseSideLength.value = null;
elements.baseAdjacentAngle.value = null; elements.baseAdjacentAngle.value = null;
} }
elements.outputsTable.classList.add("hidden"); elements.outputsTable.classList.add("hidden");
updateCalculateButton()
} }
function checkAngle(angleString) {
function check180Angle(angleString) {
let angle = parseFloat(angleString); let angle = parseFloat(angleString);
if (isNaN(angle)) { if (isNaN(angle)) {
return "Введите корректное число"; return "Введите корректное число";
@@ -223,6 +233,20 @@ function checkAngle(angleString) {
return ""; return "";
} }
function check90Angle(angleString) {
let angle = parseFloat(angleString);
if (isNaN(angle)) {
return "Введите корректное число";
}
if (angle <= 0) {
return "Угол должен быть больше 0";
}
if (angle >= 90) {
return "Угол должен быть меньше 90";
}
return "";
}
function checkLength(lengthString) { function checkLength(lengthString) {
let length = parseFloat(lengthString); let length = parseFloat(lengthString);
if (!isFinite(length)) { if (!isFinite(length)) {
@@ -234,30 +258,20 @@ function checkLength(lengthString) {
return ""; return "";
} }
elements.outputsFieldset.addEventListener('change', function (event) {
if (event.target.type === 'checkbox') {
updateCheckboxes();
}
});
elements.inputsForm.addEventListener('change', handleInputEvent);
elements.inputsForm.addEventListener('input', handleInputEvent);
function handleSwitchInputs(event) { function handleSwitchInputs(event) {
if (event.target.id[event.target.id.length - 1].toLowerCase() == "a") { if (event.target.id[event.target.id.length - 1].toLowerCase() == "a") {
currentModeIsA = true; currentModeIsA = true;
switchAppearance(true); switchInputs(true);
console.log("Switching inputs to A"); console.log("Switching inputs to A");
} }
else { else {
currentModeIsA = false currentModeIsA = false;
switchAppearance(false); switchInputs(false);
console.log("Switching inputs to B"); console.log("Switching inputs to B");
} }
} }
function HandleInputsUpdate(event) { function handleInputsUpdate(event) {
switch (event.target.id) { switch (event.target.id) {
case "equalSideLength": case "equalSideLength":
{ {
@@ -272,7 +286,7 @@ function HandleInputsUpdate(event) {
break; break;
case "baseAngle": case "baseAngle":
{ {
const err = checkAngle(event.target.value); const err = check180Angle(event.target.value);
setErrTooltip(1, err); setErrTooltip(1, err);
if (err === "") { if (err === "") {
inputsA.angle = parseFloat(event.target.value); inputsA.angle = parseFloat(event.target.value);
@@ -294,7 +308,7 @@ function HandleInputsUpdate(event) {
break; break;
case "baseAdjacentAngle": case "baseAdjacentAngle":
{ {
const err = checkAngle(event.target.value); const err = check90Angle(event.target.value);
setErrTooltip(3, err); setErrTooltip(3, err);
if (err === "") { if (err === "") {
inputsB.angle = parseFloat(event.target.value); inputsB.angle = parseFloat(event.target.value);
@@ -311,28 +325,33 @@ function HandleInputsUpdate(event) {
} }
function handleInputEvent(event) { function handleFieldsetEvent(event) {
if (event.target.type === 'radio') { if (event.target.type === 'radio') {
handleSwitchInputs(event); handleSwitchInputs(event);
} else if (event.target.type === 'number') { } else if (event.target.type === 'number') {
HandleInputsUpdate(event); handleInputsUpdate(event);
} }
} }
elements.inputsForm.addEventListener('change', handleFieldsetEvent);
elements.inputsForm.addEventListener('input', handleFieldsetEvent);
elements.outputsFieldset.addEventListener('change', (event) => {
if (event.target.type === 'checkbox') {
updateCheckboxes();
}
});
elements.clearButton.addEventListener('click', (event) => { elements.clearButton.addEventListener('click', (event) => {
event.preventDefault(); event.preventDefault();
clearInputs() clearCurrentInputs()
}); });
elements.calculateButton.addEventListener('click', (event) => { elements.calculateButton.addEventListener('click', (event) => {
event.preventDefault(); event.preventDefault();
displayTable(getCalculations()); displayTable(getCalculations());
}); });
// чтобы не сконфузило // чтобы не сконфузило
updateCheckboxes(); updateCheckboxes();
switchAppearance(elements.radioA.checked); switchInputs(elements.radioA.checked);

BIN
hw/hw7/imgs/type1.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
hw/hw7/imgs/type1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
hw/hw7/imgs/type2.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 32 KiB

BIN
hw/hw7/imgs/type2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

20
labs/lab7/lab7.html Normal file
View File

@@ -0,0 +1,20 @@
<body>
<h3>Языки программирования</h3>
<ul>
<li><a href ="">Python</a></li>
<li><a href ="">C</a></li>
<li><a id="test" href ="">Java</a></li>
<li><a href ="">JavaScript</a></li>
</ul>
</body>
<script>
let elem = document.getElementById("test");
elem = elem.parentNode;
while(elem.parentElement!==null){
let newElem =document.createElement(elem.children[0].tagName);
newElem.innerHTML= "Новый Элемент";
elem.appendChild(newElem);
elem=elem.parentNode;
}
</script>