itsecd · quangminh-202 · Mar 6, 2026 · Mar 6, 2026
diff --git a/intel.html b/intel.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>
+    <div class="calculator">
+        <div class="operator_numbers">
+            <input class="red_border" type="number" id="num1" placeholder="Вводить первое число">
+            <select class="red_border" id="operator">
+                <option value="+">+</option>
+                <option value="-">-</option>
+                <option value="*">*</option>
+                <option value="/">/</option>
+            </select>
+            <input class="red_border" type="number" id="num2" placeholder="Вводить второе число">
+        </div>
+
+        <div >
+            <button class="red_border" onclick="calculate()">Подсчитать</button>
+        </div>
+
+        <div class="history red_border" id="history"></div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,65 @@
+function calculate() {
+    const num1 = document.getElementById('num1');
+    const num2 = document.getElementById('num2');
+    const operator = document.getElementById('operator').value;
+    const history = document.getElementById('history');
+
+    let val1 = parseFloat(num1.value);
+    let val2 = parseFloat(num2.value);
+    let result;
+
+    if (isNaN(val1) && isNaN(val2)){
+        num1.classList.add('error');
+        num2.classList.add('error');
+        alert("Инвалид на 2 числах!!");
+        return;
+    }
+    else if (isNaN(val1)) {
+        num2.classList.remove('error');
+        num1.classList.add('error');
+        alert("Инвалид на первом числе!!");
+        return; 
+    }
+    else if (isNaN(val2)) {
+        num1.classList.remove('error');
+        num2.classList.add('error');
+        alert("Инвалид на втором числе!!");
+        return; 
+    } else {
+        num1.classList.remove('error');
+        num2.classList.remove('error');
+    }
+
+    switch(operator) {
+        case '+':
+            result = val1 + val2; 
+            break;
+        case '-':
+            result = val1 - val2;
+            break;
+        case '*':
+            result = val1 * val2;
+            break;
+        case '/': 
+            if (Math.abs(val2) < Number.EPSILON) {
+                alert("Can not divide 0");
+                return;
+            }
+            result = val1 / val2;
+            break;
+        default:
+            result = "Something was wrong";
+    }
+
+    document.querySelectorAll('.history p').forEach(
+        p => {
+            p.classList.remove('latest');
+            p.classList.add("old");
+        });
+
+    let newHistory = document.createElement('p');
+    newHistory.classList.add('latest');
+    newHistory.innerHTML = `${val1} ${operator} ${val2} = ${result}`;
+    history.appendChild(newHistory); 
+    newHistory.scrollIntoView({ behavior: 'smooth', block: 'end' });
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,102 @@
+body {
+    display: flex;
+    margin: 0;
+    background-color: #f0f0f0;
+}
+
+.calculator {
+    background: rgb(196, 241, 196);
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    width: 100%;
+    max-width: 600px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.operator_numbers{
+    display: flex;
+    flex-direction: row;
+}
+
+.red_border {
+    border: 3px dashed red;
+    border-radius: 10px;
+    font-size: 16px;
+    background-color: rgb(196, 241, 196);
+    font-family: "Comic Sans MS", "Comic Sans", cursive;
+    color: red;
+    font-weight: bold;
+}
+
+input, select, button {
+    padding: 10px;
+    margin: 5px;
+
+}
+
+input{
+    width: 35%;
+}
+
+select{
+    width: 15%;
+}
+
+button {
+    width: 40%;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: rgb(176, 221, 176);
+}
+
+.error {
+    border-color: white;
+}
+
+.history {
+    margin: 10px auto 0 auto;
+    padding: 20px;
+    width: 90%;
+    height: 200px;
+    overflow-y: auto; 
+    text-align: left;
+}
+
+.history p {
+    margin: 5px 0;
+}
+
+.history .old {
+    opacity: 50%;
+}
+
+.history .latest {
+    font-weight: bold;
+}
+
+@media (max-width: 500px) {
+    .calculator {
+        width: 100%;
+        flex-direction: column;
+        padding: 30px 0;
+
+    }
+
+    .operator_numbers{
+        flex-direction: column;
+    }
+
+    input {
+        width: 70%;
+        text-align: center;
+        margin: 10px 60px;
+    }
+
+    select {
+        margin: auto;
+    }
+
+}