[자바스크립트] html/css/js로 계산기 만들기 제1탄 🧙🏻‍♀️✨

1. 버튼 16개 만들기
2. 숫자 버튼 이벤트 리스너
3. 오퍼레이터 버튼 이벤트 리스너
4. onClickNumber 이중 if문 손보기
5. clear 버튼, = 버튼 이벤트 핸들러
전체 소스

자바스크립트로 간단하게 계산기 만들어 보기 ㅎㅎㅎ

깃허브에 올려야 하는데 깃허브 한 번 정리하고 손봐야 되서 그냥 블로그에 올린다.

나중에 전체 소스만 깃허브로 보내기

1. 버튼 16개 만들기

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</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 readonoly 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">4</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>
        
    </script>
</body>
</html>

여기까지 html로 버튼 16개 만들기

이제 script 태그 안에 각 버튼마다 이벤트 리스너 달아줘야 함

#num-0과 #num-1에 대해서만 이벤트 리스너 달아주면 이런 식으로 동작함

 document.querySelector('#num-0').addEventListener('click', () => {
    if (operator) {
        numTwo += '0';
    } else {
        numOne += '0';
    }
});
document.querySelector('#num-1').addEventListener('click', () => {
    if (operator) {
        numTwo += 1;
    } else {
        numOne += 1;
    }
    $result.value += '1';
});

이걸 16번 해 줘야 하는데 어떻게 하면 간단하게 줄일 수 있을까?

함수를 만드는 고차함수를 써야 함...

0부터 9까지 저장하는 부분은 매개변수로 만들고 다른 부분은 함수로 만들어 줘야 한다.

노가다중

2. 숫자 버튼 이벤트 리스너

 let numOne = '';
let operator = '';
let numTwo = '';
const $Operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
const onClickButton = (number) => (event) => {
    if (operator) {
        numTwo += number;
    } else {
        numOne += number;
    }
    $result.value += number;
};
 
document.querySelector('#num-0').addEventListener('click', onClickButton('0'));
document.querySelector('#num-1').addEventListener('click', onClickButton('1'));
document.querySelector('#num-2').addEventListener('click', onClickButton('2'));
document.querySelector('#num-3').addEventListener('click', onClickButton('3'));
document.querySelector('#num-4').addEventListener('click', onClickButton('4'));
document.querySelector('#num-5').addEventListener('click', onClickButton('5'));
document.querySelector('#num-6').addEventListener('click', onClickButton('6'));
document.querySelector('#num-7').addEventListener('click', onClickButton('7'));
document.querySelector('#num-8').addEventListener('click', onClickButton('8'));
document.querySelector('#num-9').addEventListener('click', onClickButton('9'));

여기까지 숫자 버튼 addEventListener 줄인거

 let numOne = '';
let operator = '';
let numTwo = '';
const $operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
const onClickNumber = (event) => {
    if (operator) {
        numTwo += event.target.textContent;
    } else {
        numOne += event.target.textContent;
    }
    $result.value += event.target.textContent;
};
 
document.querySelector('#num-1').addEventListener('click', onClickNumber);
document.querySelector('#num-2').addEventListener('click', onClickNumber);
document.querySelector('#num-3').addEventListener('click', onClickNumber);
document.querySelector('#num-0').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);

3. 오퍼레이터 버튼 이벤트 리스너

 const onClickOperator = (op) => () => {
            if (numOne) {
                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('x'));
document.querySelector('#calculate').addEventListener('click', () => {});
document.querySelector('#clear').addEventListener('click', () => {});

4. onClickNumber 이중 if문 손보기

이제 onClickNumer를 손봐야 함

if 문이 2개라서 순서를 조정해서 1개로 만들어야 한다

 const onClickOperator = (event) => {
    if (operator) {
        if (!numTwo) {
            $result.value = '';
        }
        numTwo += event.target.textContent;
        $result.value += event.target.textContent;
    } else {
        numOne += event.target.textContent;
        $result.value += event.target.textContent;
    }
}

그냥 operator이 존재하는 경우와 존재하지 않는 경우로 분기점을 잡아야 함

 let numOne = '';
let operator = '';
let numTwo = '';
const $operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
const onClickNumber = (event) => {
    if (!operator) {
        numOne += event.target.textContent;
        $result.value += event.target.textContent;
        return;
    } else {
        $result.value = '';
    }
    numTwo += event.target.textContent;
    $result.value += event.target.textContent;
};
document.querySelector('#num-1').addEventListener('click', onClickNumber);
document.querySelector('#num-2').addEventListener('click', onClickNumber);
document.querySelector('#num-3').addEventListener('click', onClickNumber);
document.querySelector('#num-0').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);

5. clear 버튼, = 버튼 이벤트 핸들러

 document.querySelector('#calculate').addEventListener('click', () => {
    if(numTwo) {
        switch (operator) {
            case '+':
                $result.value = parseInt(numOne) + parseInt(numTwo);
                break;
            case '-':
                $result.value = parseInt(numOne) - parseInt(numTwo);
                break;
            case 'x':
                $result.value = parseInt(numOne) * parseInt(numTwo);
                break;
            case '/':
                $result.value = parseInt(numOne) / parseInt(numTwo);
                break;
            default:
                break;
        }
    } else {
        alert('숫자를 먼저 입력해라~');
    }
});
document.querySelector('#clear').addEventListener('click', () => {
    numOne = '';
    operator = '';
    numTwo = '';
    $operator.value = '';
    $result.value = '';
});

전체 소스

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</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 readonoly 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">4</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 = (event) => {
            if (!operator) {
                numOne += event.target.textContent;
                $result.value += event.target.textContent;
                return;
            } else {
                $result.value = '';
            }
            numTwo += event.target.textContent;
            $result.value += event.target.textContent;
        };
        document.querySelector('#num-1').addEventListener('click', onClickNumber);
        document.querySelector('#num-2').addEventListener('click', onClickNumber);
        document.querySelector('#num-3').addEventListener('click', onClickNumber);
        document.querySelector('#num-0').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) {
                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('x'));
        document.querySelector('#calculate').addEventListener('click', () => {
            if(numTwo) {
                switch (operator) {
                    case '+':
                        $result.value = parseInt(numOne) + parseInt(numTwo);
                        break;
                    case '-':
                        $result.value = parseInt(numOne) - parseInt(numTwo);
                        break;
                    case 'x':
                        $result.value = parseInt(numOne) * parseInt(numTwo);
                        break;
                    case '/':
                        $result.value = parseInt(numOne) / parseInt(numTwo);
                        break;
                    default:
                        break;
                }
            } else {
                alert('숫자를 먼저 입력해라~');
            }
        });
        document.querySelector('#clear').addEventListener('click', () => {
            numOne = '';
            operator = '';
            numTwo = '';
            $operator.value = '';
            $result.value = '';
        });
    </script>
</body>

여기까지 일단 완성

테스트 돌려보니 5+7 해보니까 결과값이 12 잘 됨

C버튼이 안 먹혀서 클리어 이벤트 핸들러 오타 수정함~

위에 전체 코드에는 오타 수정한 완성본 올려 놓음

제2편에서는

1. 숫자 지울 수 있는 backspace 버튼

2. 계산기에 파스텔톤 입히기

3. 다중 계산을 위해 숫자와 연산자 입력을 이어서 받을 수 있도록 로직 개선.

생각 해 보니 파스텔톤 입히는 걸 가장 마지막에 해야 할 것 같다~

https://awesomepossum.tistory.com/315

[자바스크립트] ✨ html/css/js로 계산기 만들기 제2탄 🧙🏻‍♀️✨

https://awesomepossum.tistory.com/314 [자바스크립트] html/css/js로 계산기 만들기 제1탄자바스크립트로 간단하게 계산기 만들어 보기 ㅎㅎㅎ 깃허브에 올려야 하는데 깃허브 한 번 정리하고 손봐야 되서

awesomepossum.tistory.com

'JavaScript' 카테고리의 다른 글

[JavaScript] 서버 통신과 JSON (7)	2024.12.22
[자바스크립트] html/css/js로 계산기 만들기 제2탄 🧙🏻‍♀️✨ (12)	2024.11.08
[자바스크립트] 3글자 끝말잇기, DOM객체 연습 (5)	2024.11.08
[JavaScript] Windows10 자바스크립트 팝업창이 무한 로딩 / 무한 팝업 될 때 해결법 (12)	2024.11.07
[JavaScript] 자바스크립트 비동기 처리 promise then vs async await 차이점 (1)	2024.05.23

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[자바스크립트] html/css/js로 계산기 만들기 제1탄 🧙🏻‍♀️✨

1. 버튼 16개 만들기

2. 숫자 버튼 이벤트 리스너

3. 오퍼레이터 버튼 이벤트 리스너

4. onClickNumber 이중 if문 손보기

5. clear 버튼, = 버튼 이벤트 핸들러

전체 소스

'JavaScript' 카테고리의 다른 글

1. 버튼 16개 만들기

2. 숫자 버튼 이벤트 리스너

3. 오퍼레이터 버튼 이벤트 리스너

4. onClickNumber 이중 if문 손보기

5. clear 버튼, = 버튼 이벤트 핸들러

전체 소스

'JavaScript' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Calculator</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 readonoly 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">4</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>

	</script>
	</body>
	</html>

	document.querySelector('#num-0').addEventListener('click', () => {
	if (operator) {
	numTwo += '0';
	} else {
	numOne += '0';
	}
	});
	document.querySelector('#num-1').addEventListener('click', () => {
	if (operator) {
	numTwo += 1;
	} else {
	numOne += 1;
	}
	$result.value += '1';
	});

	let numOne = '';
	let operator = '';
	let numTwo = '';
	const $Operator = document.querySelector('#operator');
	const $result = document.querySelector('#result');
	const onClickButton = (number) => (event) => {
	if (operator) {
	numTwo += number;
	} else {
	numOne += number;
	}
	$result.value += number;
	};

	document.querySelector('#num-0').addEventListener('click', onClickButton('0'));
	document.querySelector('#num-1').addEventListener('click', onClickButton('1'));
	document.querySelector('#num-2').addEventListener('click', onClickButton('2'));
	document.querySelector('#num-3').addEventListener('click', onClickButton('3'));
	document.querySelector('#num-4').addEventListener('click', onClickButton('4'));
	document.querySelector('#num-5').addEventListener('click', onClickButton('5'));
	document.querySelector('#num-6').addEventListener('click', onClickButton('6'));
	document.querySelector('#num-7').addEventListener('click', onClickButton('7'));
	document.querySelector('#num-8').addEventListener('click', onClickButton('8'));
	document.querySelector('#num-9').addEventListener('click', onClickButton('9'));

	const onClickOperator = (op) => () => {
	if (numOne) {
	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('x'));
	document.querySelector('#calculate').addEventListener('click', () => {});
	document.querySelector('#clear').addEventListener('click', () => {});

	const onClickOperator = (event) => {
	if (operator) {
	if (!numTwo) {
	$result.value = '';
	}
	numTwo += event.target.textContent;
	$result.value += event.target.textContent;
	} else {
	numOne += event.target.textContent;
	$result.value += event.target.textContent;
	}
	}

	document.querySelector('#calculate').addEventListener('click', () => {
	if(numTwo) {
	switch (operator) {
	case '+':
	$result.value = parseInt(numOne) + parseInt(numTwo);
	break;
	case '-':
	$result.value = parseInt(numOne) - parseInt(numTwo);
	break;
	case 'x':
	$result.value = parseInt(numOne) * parseInt(numTwo);
	break;
	case '/':
	$result.value = parseInt(numOne) / parseInt(numTwo);
	break;
	default:
	break;
	}
	} else {
	alert('숫자를 먼저 입력해라~');
	}
	});
	document.querySelector('#clear').addEventListener('click', () => {
	numOne = '';
	operator = '';
	numTwo = '';
	$operator.value = '';
	$result.value = '';
	});