Показать сообщение отдельно
  #1 (permalink)  
Старый 12.06.2022, 20:56
Интересующийся
Отправить личное сообщение для bizunowvova Посмотреть профиль Найти все сообщения от bizunowvova
 
Регистрация: 18.04.2022
Сообщений: 15

Мой первый калькулятор...
Всем привет! Как и многие решил написать свой калькулятор. Хочу вот полностью на JS. Только разметка на HTML и немного CSS магии. Пробовал через switch, не понял как реализовать в моем случае. Сам понимаю, что выглядит ужасно, но все же прошу помочь.
Сейчас не работает равно, уже перетыкал все, что приходит на ум.
В перспективе хотелось бы, конечно, что бы работал не только с двумя числами, но пока имеем, что умеем)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="/css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="/css/bootstrap-grid.css.map">
    <link rel="stylesheet" href="/css/bootstrap-reboot.css.map">
    <link rel="stylesheet" href="css/index.css">
    
    <title>Document</title>
</head>
<body>
    <div class="main">
        <div class="container">
            <div class="row">
                    <div class="col-md-3 offset-md-4">
                        <div class="main_input">
                            <input placeholder="Введите число" type="text" readonly>
                        </div>
                    </div>
                </div>
                <div class="main_btn">
                    <div class="col-md-3 offset-md-4">
                        <button id="operation_clear" class="main_btn_calc">AC</button>
                        <button id="operation_plus" class="main_btn_calc">+</button>
                        <button id="operation_minus" class="main_btn_calc">-</button>
                        <button id="operation_equals" class="main_btn_calc">=</button>
                    </div>                   
                    <div class="col-md-3 offset-md-4">
                        <button id="num_1" class="main_btn_calc">1</button>
                        <button id="num_2" class="main_btn_calc">2</button>
                        <button id="num_3" class="main_btn_calc">3</button>
                        <button id="operation_mul" class="main_btn_calc">Х</button>
                    </div>
                    <div class="col-md-3 offset-md-4">
                        <button id="num_4" class="main_btn_calc">4</button>
                        <button id="num_5" class="main_btn_calc">5</button>
                        <button id="num_6" class="main_btn_calc">6</button>
                        <button id="operation_divide" class="main_btn_calc">/</button>
                    </div>
                    <div class="col-md-3 offset-md-4">
                        <button id="num_7" class="main_btn_calc">7</button>
                        <button id="num_8" class="main_btn_calc">8</button>
                        <button id="num_9" class="main_btn_calc">9</button>
                    </div>
                    <div class="col-md-3 offset-md-4">
                        <button id="num_0" class="main_btn_calc">0</button>
                        <button id="operation_dot" class="main_btn_calc">.</button>
                        <button id="operation_del" class="main_btn_calc">⌫</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>

'use strict'
function Calculator() {
    const input = document.querySelector('input');
    const btn = document.querySelector('button.main_btn_calc');
    const clearBtn = document.querySelector('#operation_clear');
    const plusBtn = document.querySelector('#operation_plus');
    const divideBtn = document.querySelector('#operation_divide');
    const mulBtn = document.querySelector('#operation_mul');
    const minusBtn = document.querySelector('#operation_minus');
    const equalsBtn = document.querySelector('#operation_equals');
    const delBtn = document.querySelector('#operation_del');
    const dot = document.querySelector('#operation_dot');
    const zero = document.querySelector('#num_0');
    const one = document.querySelector('#num_1');
    const two = document.querySelector('#num_2');
    const three = document.querySelector('#num_3');
    const four = document.querySelector('#num_4');
    const five = document.querySelector('#num_5');
    const six = document.querySelector('#num_6');
    const seven = document.querySelector('#num_7');
    const eight = document.querySelector('#num_8');
    const nine = document.querySelector('#num_9');

    function onClick(number) {
        number.addEventListener('click', () => {
            input.value += number.innerHTML;
        })
    }
    onClick(one);
    onClick(two);
    onClick(three);
    onClick(four);
    onClick(five);
    onClick(six);
    onClick(seven);
    onClick(eight);
    onClick(nine);
    onClick(zero);
    onClick(dot);
    // onClick(plus);
    // onClick(minus);
    // onClick(divide);
    // onClick(mul);

    clearBtn.addEventListener('click', () => {
        input.value = "";
    })
    
    delBtn.addEventListener('click', () => {
        input.value = input.value.slice(0, -1);
    })
    
    let num1;
    let num2;

    function plus() {
        plusBtn.addEventListener('click', () => {
            num1 = input.value;
            input.value = '';
        })
    }
    function minus() {
        minusBtn.addEventListener('click', () => {
            num1 = input.value;
            input.value = '';
        })
    }
    function multiple() {
        mulBtn.addEventListener('click', () => {
            num1 = input.value;
            input.value = '';
        })
    }

    function divide() {
        divideBtn.addEventListener('click', () => {
            num1 = input.value;
            input.value = '';
        })
    }

    if (minus()) {
        equalsBtn.addEventListener('click', () => {
            num2 = input.value;
            input.value = Number(num1) - Number(num2);
        })
    }else if (plus()) {
        equalsBtn.addEventListener('click', () => {
            num2 = input.value;
            input.value = Number(num1) + Number(num2);
        })
    }else if(multiple()) {
        equalsBtn.addEventListener('click', () => {
            num2 = input.value;
            input.value = Number(num1) * Number(num2);
        })
    }else if (divide()) {
        equalsBtn.addEventListener('click', () => {
            num2 = input.value;
            input.value = Number(num1) / Number(num2);
        })
    }


    
}
document.addEventListener("DOMContentLoaded", Calculator);

Код:
.main {
    padding: 20px 0 0 0;
}

/* .main .main_input {

} */

.main .main_btn {
    margin-top: 10px;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
}


.main .main_btn .main_btn_calc {
    margin: 2px;
    width: 35px;
    height: 35px;
    border: none;
}
Ответить с цитированием