[JS] CALCULATOR

9u4a·2021년 5월 14일

JavaScript calculator 계산기 자바스크립트

JS

목록 보기

1/1

CALCULATOR

js를 이용하여 계산기 만들기
연등시간에 열심히 두들긴 js 첫 프로젝트를 완성했습니다 호호

1. preview

2. html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
    <div id="box">
        <form id="display">
            <input type="text" id="text" type="text" readonly/>
        </form>
        <div id="r1">
            <button id="operator" class="r1-1">%</button>
            <button id="C" class="r1-2">C</button>
        </div>
        <div id="r2">
            <button id="7">7</button>
            <button id="8">8</button>
            <button id="9">9</button>
            <button id="operator">+</button>
        </div>
        <div id="r3">
            <button id="4">4</button>
            <button id="5">5</button>
            <button id="6">6</button>
            <button id="operator">-</button>
        </div>
        <div id="r4">
            <button id="1">1</button>
            <button id="2">2</button>
            <button id="3">3</button>
            <button id="operator">*</button>
        </div>
        <div id="r5">
            <button id="0">0</button>
            <button id=".">.</button>
            <button id="equals">=</button>
            <button id="operator">/</button>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

3. CSS

button{
    width:50px;
    height:50px;
    padding:10px;
    margin:5px;
    font-size:20px;
}
.r1-1,.r1-2{
    width:115px;
    height:50px;
}
#text{
    margin:5px;
    width:240px;
    height:50px;
 }

HTML과 CSS는 최대한 간단하게 구성했습니다.

4. JS

ex) a + b = c 를 구하려면
item1 = a
ope = '+'
item2 = b
equals = '='
result = c

1) 기본구성

function init() {
  btns.forEach(function button(btn){
    btn.addEventListener("click", function btnHandler(){
        switch(btn.id){
            case "operator":
                let ope = btn.innerText;
                operator(ope);
                break;
            case "C":
                clear();
                break;
            case "equals":
                equals();
                break;
            default:
                displayNumber(btn.id);
                break;
        }
    });
  });
}

계산기의 button이 클릭되었을 때 html button의 id값을 받아와서 switch를 사용하여 구분했습니다.

2) displayNumber (수 입력받기)

function displayNumber(number){
    if(!item1 || !ope){
        display.value += number;
        item1 += number;
    } else if(item1 && ope){
        display.value += number;
        item2 += number;       
    } else display.value = "error";
}

item1이 한자리 수가 아닌 10 100 1000이 될 경우를 생각하여
연산자가 나오기 전까지는 문자열 형식으로 입력받았고,

또한 b를 입력받으려면 item1과 연산자가 존재하여야 한다고 조건을 줬습니다.
'.' 또한 displayNumber에서 처리했습니다.

3) operator (연산자)

function operator(oper){
    if(!item1) {
        display.value ="error"
    }else{
        display.value += oper;
        ope = oper;
    }
}

operator에선 단순하게 display에 입력된 연산자를 출력해주고
빈 문자열인 ope에 입력받은 연산자를 대입했습니다.

4) equals (연산값 출력)

function equals(){
     if(ope){
       switch(ope){
        case "+":
               result = (parseFloat(item1)+parseFloat(item2));
               break;
        case "-":
               result = (parseFloat(item1)-parseFloat(item2));
               break;
        case "/":
               result = (parseFloat(item1) / parseFloat(item2));
               break;
        case "%":
               result = (parseFloat(item1)%parseFloat(item2));
               break;
        case "*":
               result = (parseFloat(item1)*parseFloat(item2));
               break;
        }
    }else display.value ="error";
    display.value = result;
    item1 = result;
    item2 = 0;
    ope ="";
}

equals에선 operator에서 받은 ope값으로 switch 조건을 주었고,
displayNumber에서 문자열 형태로 입력받은 item들을 float형으로 변환하여 result에 대입했습니다.

display에 결과값을 출력한 후
item2와 연산자를 초기화

5) clear

function clear(){
    result = 0;
    ope = "";
    item1 = 0;
    item2 = 0;
    display.value ="";
}

clear에선 모든 값들을 초기화함.

5. 마치며

react를 공부하다가 js에 대하여 부족하다는 느낌이 많이 들어서
js를 다시 공부하고 있는데 상당히 재미있다.

계산기를 만들면서 다른사람들이 미리 만들어 둔 계산기들을 많이 봤는데
제가 원하는 방식으로 구현된 js계산기를 찾지 못했다는....

하나하나 최대한 짧고 간단한 코드로
구현하려 노력했습니다.

질문이나 부족하다고 생각이 되는 부분들은 의견 남겨주십쇼!!

9u4a