TIL-15 JS로 계산기 만들기

PRB·2021년 7월 13일
1

JavaScript

목록 보기
8/24
post-thumbnail
<div class="number">
    <input readonly class="change"> <input readonly class="resul">
    <div><button class="number_7">7</button><button class="number_8">8</button><button class="number_9">9</button><button class="minus">+</button></div>
    <div><button class="number_4">4</button><button class="number_5">5</button><button class="number_6">6</button><button class="divide">-</button></div>
    <div><button class="number_1">1</button><button class="number_2">2</button><button class="number_3">3</button><button class="multiply">*</button></div>
    <div><button class="number_c">C</button><button class="number_0">0</button><button class="resull">=</button><button class="calculate">/</button></div>
    </div>
    <script>
        let $resul = document.querySelector('.resul')
        let $change = document.querySelector('.change')
        let one = ""
        let two = ""
        let operator = ""
        let onClick = (number) => {
            return () => {
                if (!$change.value){
                $resul.value += number;
                one = $resul.value;
                }
                else {
                    $resul.value += number;
                    two = $resul.value;
                }
            }
        }

        let onClickOperator = (op) => {
            return () => {
                if(one){
                $change.value = op;
                $resul.value = "";
                }
                else{
                    alert('숫자를 입력하세요')
                }
                }
            }
            let onClickResul = () => {
                if(two){
                switch ($change.value) {
                case '+':
                $resul.value = parseInt(one) + parseInt(two);
                $change.value = ''
                one = $resul.value 
                break;
                case '-':
                $resul.value = one - two;
                $change.value = '';
                one = $resul.value 
                break;
                case '*':
                $resul.value = one * two;
                $change.value = '';
                one = $resul.value 
                break;
                case '/':
                $resul.value = one / two;
                $change.value = '';
                one = $resul.value 
                break;
                }
                }
                else{
                    alert('숫자를 입력하세요')
                }
                    
                }
        document.querySelector('.number_0').addEventListener('click',onClick('0'))
        document.querySelector('.number_1').addEventListener('click',onClick('1'))
        document.querySelector('.number_2').addEventListener('click',onClick('2'))
        document.querySelector('.number_3').addEventListener('click',onClick('3'))
        document.querySelector('.number_4').addEventListener('click',onClick('4'))
        document.querySelector('.number_5').addEventListener('click',onClick('5'))
        document.querySelector('.number_6').addEventListener('click',onClick('6'))
        document.querySelector('.number_7').addEventListener('click',onClick('7'))
        document.querySelector('.number_8').addEventListener('click',onClick('8'))
        document.querySelector('.number_9').addEventListener('click',onClick('9'))
        document.querySelector('.number_c').addEventListener('click', () => {
        one = ""
        two = ""
        $change.value = ""
        $resul.value = ""
        })
        document.querySelector('.minus').addEventListener('click',onClickOperator('+'))
        document.querySelector('.divide').addEventListener('click',onClickOperator('-'))
        document.querySelector('.multiply').addEventListener('click',onClickOperator('*'))
        document.querySelector('.calculate').addEventListener('click',onClickOperator('/'))
        document.querySelector('.resull').addEventListener('click',onClickResul)
</script>

참고자료
https://www.youtube.com/watch?v=F5nlnM6Z9Vo&list=PLcqDmjxt30RvEEN6eUCcSrrH-hKjCT4wt&index=42

profile
사용자 입장에서 사용자가 원하는 것을 개발하는 프론트엔드 개발자입니다.

0개의 댓글