문제 출처
hackerrank
문제 : Binary Caculator
내용 : 일반 10진수 계산기가 아닌 2진수 계산기를 만들자.
해결방법 :
1) 각 계산기의 버튼을 누르면 event리스너가 작동하면서 innerText 값을 가져온다.
2) 해당 값을 정규식으로 분류해 기호를 기준으로 왼쪽 오른쪽 숫자를 변수에 담는다.
3) 숫자1, 기호, 숫자2를 클래스로 보내고, 클래스에서 처리한 결과를 display 출력하면 끝.
html
<!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">
<title>Day9_Binary_Calculator</title>
<link rel="stylesheet" href="binaryCalc.css" type="text/css">
</head>
<body>
<h2>Day 9: Binary Calculator </h2>
<div id="res"></div>
<div id="btns">
<button id="btn0">0</button>
<button id="btn1">1</button>
<button id="btnClr">C</button>
<button id="btnEql">=</button>
<button id="btnSum">+</button>
<button id="btnSub">-</button>
<button id="btnMul">*</button>
<button id="btnDiv">/</button>
</div>
<script src="binaryCalc.js" type="text/javascript"></script>
</body>
</html>binaryCalc.js
class Calculator {
constructor(number) {
this.number = number;
}
displayCal(res) {
let dit = disPlayRes.innerText += res;
return dit;
}
resultCal(num1, numOper, num2) {
switch(numOper){
case '+' : result = num1 + num2; break;
case '-' : result = num1 - num2; break;
case '*' : result = num1 * num2; break;
case '/' : result = num1 / num2; break;
}
cal.displayCal(result.toString(2)); // 10진수를 2진수로 변경
}
}
// display 출력
const disPlayRes = document.querySelector('#res');
const btn = document.querySelectorAll('button');
const cal = new Calculator();
let result = 0;
btn.forEach( num => { // btn의 값들을 순회하면서 addEventListener 가 실행
num.addEventListener('click', (e) => {
const inputCal = e.target.innerText;
let returnCal = cal.displayCal(inputCal);
const exr = /(\-|\*|\/|\+|\=|\C)/g; // 정규식으로 기호 분리
const number = returnCal.split(exr); // 기호 기준 좌우 값 출력
const num1 = parseInt(number[0], 2); //2진수를 10진수로 변경
const numOper = number[1];
const num2 = parseInt(number[2], 2);
if(number.includes('=')){ // 등호 누르면 계산
disPlayRes.innerText = "";
cal.resultCal(num1, numOper, num2);
}else if(number.includes('C')){ // C 누르면 화면 초기화
disPlayRes.innerText = "";
}
});
});
css
body {
width : 33%;
}
#btns button {
width : 25%;
height: 36px;
font-size: 18px;
margin : 0px;
float : left;
}
#res {
background-color: lightgray;
border : solid;
height: 48px;
font-size: 20px;
}
#btn0, #btn1 {
background-color: lightgreen;
color: brown;
}
#btnClr, #btnEql {
background-color: darkgreen;
color : white;
}
#btnSum, #btnSub, #btnMul, #btnDiv{
background-color: black;
color: red;
}
후기 :
재밌다. 이로써 hackerrank의 10 days javascript 과정이 끝났다. 이번 문제를 풀때는 일부러 class와 화살표 함수를 적극 사용했다.
평소 자바스크립트를 많이 사용해보지 않아서 문제 푸는데 한참 걸리긴 했지만, 나름 완성하고나니 뿌듯하다.
물론 아직 예외처리 할게 많이 남았다. 기호를 두개 이상 입력해도 진행되는 점, 0으로 나눌 때 NaN, 기호가 먼저 입력되었을 때 에러, 수를 끝없이 입력하면 계산기를 뚫고 나가는 점 등 해야할 처리는 많다. 하나씩 차근히 봐야지.
풀이 보지 말고 혼자서 끙끙대며 하라는 말에 정말 끙끙대면서 하니까 되긴 한다. 겨우 계산기라고 만만하게 봤는데 나름 생각을 많이 하는 시간이었다.
florentyoon의 IT 세상