itsecd · klon-22800 · Feb 28, 2026
diff --git a/index.html b/index.html
@@ -0,0 +1,40 @@
+<!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="styles.css">
+</head>
+<body>
+
+<div class="calculator">
+
+    <div class="grid-elem input-wrapper">
+        <input type="text" id="operand1"  autocomplete="off">
+        <div class="error-message" id="error1"></div>
+    </div>
+
+    <div class="grid-elem select-wrapper">
+        <select id="operation">
+            <option value="+">+</option>
+            <option value="-">-</option>
+            <option value="*">*</option>
+            <option value="/">/</option>
+        </select>
+    </div>
+
+    <div class="grid-elem input-wrapper">
+        <input type="text" id="operand2"  autocomplete="off">
+        <div class="error-message" id="error2"></div>
+    </div>
+
+    <button id="calculate" class="grid-elem">подсчитать</button>
+
+    <div id="results" class="grid-elem"></div>
+
+</div>
+
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,85 @@
+const operand1 = document.getElementById("operand1");
+const operand2 = document.getElementById("operand2");
+const operation = document.getElementById("operation");
+const calculateBtn = document.getElementById("calculate");
+const resultsDiv = document.getElementById("results");
+
+const error1 = document.getElementById("error1");
+const error2 = document.getElementById("error2");
+
+const MAX_HISTORY = 3;
+
+function cleanInput(e) {
+    if (e.target.value.length > 1 && e.target.value.startsWith('0') && e.target.value[1] !== '.') {
+        e.target.value = e.target.value.replace(/^0+/, '0');
+    }
+}
+
+operand1.addEventListener('input', cleanInput);
+operand2.addEventListener('input', cleanInput);
+
+function validateInput(input, errorElement) {
+    const value = input.value.trim();
+
+    if (value === "") {
+        errorElement.textContent = "Поле не должно быть пустым";
+        input.classList.add("error");
+        return false;
+    }
+
+    if (isNaN(value)) {
+        errorElement.textContent = "Введите корректное число";
+        input.classList.add("error");
+        return false;
+    }
+
+    errorElement.textContent = "";
+    input.classList.remove("error");
+    return true;
+}
+
+function calculate() {
+    const isValid1 = validateInput(operand1, error1);
+    const isValid2 = validateInput(operand2, error2);
+
+    if (!isValid1 || !isValid2) return;
+
+    const num1 = parseFloat(operand1.value);
+    const num2 = parseFloat(operand2.value);
+    const op = operation.value;
+
+    if (op === "/" && num2 === 0) {
+        error2.textContent = "Деление на ноль запрещено";
+        operand2.classList.add("error");
+        return;
+    }
+
+    let result;
+
+    switch (op) {
+        case "+": result = num1 + num2; break;
+        case "-": result = num1 - num2; break;
+        case "*": result = num1 * num2; break;
+        case "/": result = num1 / num2; break;
+    }
+
+    const expression = `${num1} ${op} ${num2} = ${result}`;
+
+    const div = document.createElement("div");
+    div.textContent = expression;
+    div.classList.add("current-result");
+
+    const oldCurrent = resultsDiv.querySelector(".current-result");
+    if (oldCurrent) {
+        oldCurrent.classList.remove("current-result");
+        oldCurrent.classList.add("history-item");
+    }
+
+    resultsDiv.prepend(div);
+
+    while (resultsDiv.children.length > MAX_HISTORY) {
+        resultsDiv.removeChild(resultsDiv.lastElementChild);
+    }
+}
+
+calculateBtn.addEventListener("click", calculate);
diff --git a/styles.css b/styles.css
@@ -0,0 +1,137 @@
+* {
+    color: #ff0000;
+    box-sizing: border-box;
+    font-weight: bold;
+    font-family: Arial, sans-serif;
+}
+
+body, html {
+    margin: 0;
+    padding: 0;
+}
+
+.calculator {
+    margin: 20px;
+    min-width: 50%;
+    max-width: 600px;
+    padding: 20px;
+
+    display: grid;
+    grid-template-columns: 3fr 1fr 3fr;
+    grid-auto-rows: minmax(50px, auto);
+    gap: 30px;
+
+    background-color: #baffc2;
+    border-radius: 10px;
+    min-height: 260px;
+    container-type: inline-size;
+}
+
+#calculate {
+    grid-column: 1 / 4;
+    width: 30%;
+    min-width: 130px;
+    justify-self: center;
+    font-size: 130%;
+}
+
+#results {
+    grid-column: 1 / 4;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column-reverse;
+    font-size: 120%;
+    padding: 10px;
+
+}
+
+.calculator > .grid-elem {
+    border-radius: 16px;
+    border: 2px dashed #ff0000;
+    background: transparent;
+}
+
+.select-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+#operation {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
+    width: 100%;
+    height: 100%;
+    border: none;
+    background: transparent;
+
+    text-align: center;
+    font-size: 130%;
+    font-weight: bold;
+
+    padding-right: 40px;
+    outline: none;
+}
+
+.select-wrapper::after {
+    content: "∨";
+    position: absolute;
+    right: 12px;
+    font-size: 20px;
+    pointer-events: none;
+    font-weight: bold;
+
+}
+
+.grid-elem input {
+    width: 100%;
+    height: 100%;
+    border: none;
+    outline: none;
+    background: inherit;
+    text-align: left;
+    padding-left: 5%;
+    font-size: 120%;
+}
+
+input.error {
+    background-color: #f7cccc;
+    border-radius: 16px;
+
+}
+
+.error-message {
+    font-size: 12px;
+    height: 14px;
+}
+
+.history-item {
+    opacity: 0.5;
+}
+
+.current-result {
+    opacity: 1;
+    font-weight: bold;
+}
+
+@media (max-width: 600px) {
+    .calculator {
+        width: 90%;
+        grid-template-columns: 1fr;
+        gap: 15px;
+    }
+    .select-wrapper{
+        width: 30%;
+        justify-self: center;
+    }
+
+     #calculate {
+        width: 50%;
+        grid-column: auto;
+    }
+    #results {
+        grid-column: auto;
+    }
+}