itsecd · kaaatz-e · Mar 1, 2026 · Mar 4, 2026 · Mar 4, 2026
diff --git a/lab_1/index.html b/lab_1/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Калькулятор</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<form id="calculator">
+    <div class="row">
+        <div class="input-block">
+            <input type="number" id="num1" required step="any">
+        </div>
+        <div class="operator">
+            <select id="operation">
+                <option value="+">+</option>
+                <option value="-">-</option>
+                <option value="*">×</option>
+                <option value="/">÷</option>
+            </select>
+        </div>
+        <div class="input-block">
+            <input type="number" id="num2" required step="any">
+        </div>
+    </div>
+    <button id="calculate">подсчитать</button>
+    <div class="results" id="results"></div>
+</form>
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/lab_1/script.js b/lab_1/script.js
@@ -0,0 +1,76 @@
+function getElement(id) {
+    const element = document.getElementById(id);
+    if (!element) {
+        throw new Error(`Элемент с id="${id}" не найден :\(`);
+    }
+    return element;
+}
+
+const num1Input = getElement("num1");
+const num2Input = getElement("num2");
+const operationSelect = getElement("operation");
+const form = getElement("calculate");
+const resultsDiv = getElement("results");
+
+let history = [];
+
+form.addEventListener("click", function(event) {
+    event.preventDefault();
+    if (!form.checkValidity()) {
+            form.reportValidity();
+            return;
+        }
+
+    calculate();
+})
+
+function calculate() {
+    const num1 = Number(num1Input.value);
+    const num2 = Number(num2Input.value);
+    const operation = operationSelect.value;
+
+    let result;
+
+    if (operation === "/" && num2 === 0) {
+        alert("Деление на ноль!");
+        return;
+    }
+
+    switch (operation) {
+        case "+":
+            result = num1 + num2;
+            break;
+        case "-":
+            result = num1 - num2;
+            break;
+        case "*":
+            result = num1 * num2;
+            break;
+        case "/":
+            result = num1 / num2;
+            break;
+    }
+
+    const expression = `${num1} ${operation} ${num2} = ${result}`;
+    history.push(expression);
+
+    if (history.length > 7) history.shift();
+
+    renderHistory();
+}
+
+function renderHistory() {
+    resultsDiv.innerHTML = "";
+
+    history.forEach((item, index) => {
+        const div = document.createElement("div");
+        div.textContent = item;
+        div.classList.add("result-item");
+        if (index === history.length - 1) {
+            div.classList.add("result-item");
+        } else {
+            div.classList.add("old");
+        }
+        resultsDiv.appendChild(div);
+    });
+}
diff --git a/lab_1/style.css b/lab_1/style.css
@@ -0,0 +1,122 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: flex-start;
+    margin: 25px;
+}
+
+form {
+    background-color:  #baffc2;
+    padding: 15px;
+    border-radius: 10px;
+    width: 100%;
+    max-width: 600px;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    gap: 30px;
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    gap: 20px;
+    align-items: flex-start;
+}
+
+.input-block {
+    position: relative; 
+    flex: 1;
+    display: flex;
+}
+
+input, select, button, .results {
+    padding: 5px 10px;
+    font-size: 20px;
+    border-radius: 12px;
+    border: 1px dashed red;
+    outline: none;
+    background: transparent;
+    color: red;
+    box-sizing: border-box;
+}
+
+input {
+    width: 100%;
+}
+
+.operator {
+    position: relative;
+    width: 80px;
+    align-self: center;
+}
+
+.operator select {
+    width: 80px;
+    text-align: center;
+    cursor: pointer;
+    flex-shrink: 0;
+    padding-right: 35px;
+    appearance: none;
+}
+
+.operator::after {
+    content: "";
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-60%) rotate(135deg);
+    color: red;
+    font-size: 12px;
+    pointer-events: none;
+    width: 8px;
+    height: 8px;
+    border-top: 1px solid red;
+    border-right: 1px solid red;
+    margin-right: 0px;
+}
+
+button {
+    display: block;
+    padding: 8px 40px;
+    align-self: center;
+    cursor: pointer;
+}
+
+button:hover {
+    background: rgba(255, 0, 0, 0.05);
+}
+
+.results {
+    padding: 20px;
+    min-height: 80px;
+    gap: 10px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.results .old {
+    opacity: 0.35;
+}
+
+.result-item {
+    color: red;
+}
+
+@media (max-width: 600px) {
+    .row {
+        flex-direction: column;
+        gap: 25px;
+    }
+
+    .operator select {
+        align-self: center;
+        width: 100%;
+    }
+
+    .input-block {
+        width: 100%;
+    }
+}