TIL(2021.12.31)

조지성·2022년 1월 3일

TIL

목록 보기

13/78

연이어 계산하기

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>계산기</title>
    <style>
        * {
            box-sizing: border-box
        }

        #result {
            width: 180px;
            height: 50px;
            margin: 5px;
            text-align: right
        }

        #operator {
            width: 50px;
            height: 50px;
            margin: 5px;
            text-align: center
        }

        button {
            width: 50px;
            height: 50px;
            margin: 5px
        }
    </style>
</head>

<!--계산기버튼구현-->

<body>
    <input readonly id="operator">
    <input readonly type="number" id="result">
    <div class="row">
        <button id="num-7">7</button>
        <button id="num-8">8</button>
        <button id="num-9">9</button>
        <button id="plus">+</button>
    </div>
    <div class="row">
        <button id="num-4">4</button>
        <button id="num-5">5</button>
        <button id="num-6">6</button>
        <button id="minus">-</button>
    </div>
    <div class="row">
        <button id="num-1">1</button>
        <button id="num-2">2</button>
        <button id="num-3">3</button>
        <button id="divide">/</button>
    </div>
    <div class="row">
        <button id="clear">C</button>
        <button id="num-0">0</button>
        <button id="calculate">=</button>
        <button id="multiply">x</button>
    </div>
    <script>
        let numOne = '';
        let operator = '';
        let numTwo = '';
        const $operator = document.querySelector('#operator'); //태그 선택자
        const $result = document.querySelector('#result'); //  태그 선택자
        // const onClickNumber = (number) =>  //중복이 발생했을 때 중복이 아닌 부분을 매개변수로 빼라 , 함수가 함수를 리턴 (고차함수)
        //     //MEMO 2021.12.30 클릭할 때 함수가 실행되면서 브라우저가 인수로 이벤트를 넣어준다.
        //     (event) => {
        //         if (operator) {
        //             numTwo += number;
        //         } else {
        //             numOne += number;
        //         }
        //         $result.value += number;
        //     }; // 고차 함수 high order function
        const onClickNumber = (event) => { //일반 함수로 해결
            if (!operator) {
                numOne += event.target.textContent;
                $result.value += event.target.textContent;
                return;
            }
            if (!numTwo) { //numTwo를 처음 클릭할때만 없다
                $result.value = '';
            }
            numTwo += event.target.textContent;
            $result.value += event.target.textContent;
        };
        document.querySelector('#num-0').addEventListener('click', onClickNumber);
        document.querySelector('#num-1').addEventListener('click', onClickNumber);
        document.querySelector('#num-2').addEventListener('click', onClickNumber);
        document.querySelector('#num-3').addEventListener('click', onClickNumber);
        document.querySelector('#num-4').addEventListener('click', onClickNumber);
        document.querySelector('#num-5').addEventListener('click', onClickNumber);
        document.querySelector('#num-6').addEventListener('click', onClickNumber);
        document.querySelector('#num-7').addEventListener('click', onClickNumber);
        document.querySelector('#num-8').addEventListener('click', onClickNumber);
        document.querySelector('#num-9').addEventListener('click', onClickNumber);


        const onClickOperator = (op) => () => {
            if (numOne) {
                if (numTwo) {
                    switch (operator) {
                        case '+':
                            $result.value = parseInt(numOne) + parseInt(numTwo);

                            break;
                        case '-':
                            $result.value = numOne - numTwo;
                            break;
                        case '*':
                            $result.value = numOne * numTwo;
                            break;
                        case '/':
                            $result.value = numOne / numTwo;
                            break;
                        default:
                            break;
                    }
                    $operator.value = '';
                    numOne = $result.value;
                    operator = '';
                    numTwo = '';
                } 
                operator = op;
                $operator.value = op;
            } else {
                alert('숫자를 먼저 입력하세요');
            }
        };
        document.querySelector('#plus').addEventListener('click', onClickOperator('+'));
        document.querySelector('#minus').addEventListener('click', onClickOperator('-'));
        document.querySelector('#divide').addEventListener('click', onClickOperator('/'));
        document.querySelector('#multiply').addEventListener('click', onClickOperator('*'));
        document.querySelector('#calculate').addEventListener('click', () => {
            if (numTwo) {
                switch (operator) {
                    case '+':
                        $result.value = parseInt(numOne) + parseInt(numTwo);

                        break;
                    case '-':
                        $result.value = numOne - numTwo;
                        break;
                    case '*':
                        $result.value = numOne * numTwo;
                        break;
                    case '/':
                        $result.value = numOne / numTwo;
                        break;
                    default:
                        break;
                }
                $operator.value = '';
                numOne = $result.value;
                operator = '';
                numTwo = '';
            } else {
                alert('숫자를 먼저 입력하세요.');
            }
        });
        // 클리어 
        document.querySelector('#clear').addEventListener('click', () => {
            numOne = '';
            operator = '';
            numTwo = '';
            $operator.value = '';
            $result.value = '';
        });
    </script>
</body>