계산기

계산하기

계산할 첫번째 수(numOne), 계산을 수행할 연산자(Operator), 계산할 두번째 수(numTwo)를 순차적으로 입력을 받았을 때, '='을 클릭하면 연산을 수행하게 만든다.
그렇지만, 계산할 두번째 수(numTwo)를 입력받지 않고, '='을 클릭 시 경고창으로 '숫자를 입력 하세요'를 띄운다.

<script>
document.querySelector('#calculate').addEventListener('click', () => {
	if (numTwo) { //numTwo가 있을 시
    	switch (operator) {
        	case '+' :
            	$result.value = parseInt(numOne) + parseInt(numTwo);
           		break;
                
            case '-' :
                $result.value = parseInt(numOne) - parseInt(numTwo); 
                // numOne - numTwo 도 가능하다. 빼기, 곱하기, 나누기는 자동적으로 숫자열로 바꾸어준다.
                // 저는 헷갈려서 넣었습니다^_^
                break;

			case '*' :
            	$result.value = parseInt(numOne) * parseInt(numTwo);
                break;
                
            case '/' :
            	$result.value = parseInt(numOne) / parseInt(numTwo);
            	break;

			default :
            	break;
        }
    } else { // 만약 2번째 숫자가 없으면
    	alert('숫자를 먼저 입력하세요.');
    	}
    });
</script>

연산자가 처리부분은 완료했다.
그리고 남은건 계산기 부분의 C 버튼을 누르면 Clear가 되는 것
이 부분은 상당히 쉽다.
그냥 모든 부분의 값을 빈 값으로 설정하면 된다.

<script>
document.querySelector('#clear').addEventListener('click', () => {
	numOne = '';
    operator = '';
    numTwo = '';
    $operator.value = '';
    $result.value = '';
}
</script>

이로써 계산기는 구현성공!

numOne 입력 시,

operator 입력 시,

numTwo 입력 시,

결과

clear 버튼을 눌렀을 시,