[새싹 프론트엔드] 자바스크립트로 계산기 만들기

구현할 기능

- 숫자와 연산자를 클릭하면 input 창에 나오게 하기

- '='을 클릭하면 계산하기

- 'CE"와 'C'를 클릭하면 전체 지우기

- 'BACK'을 클릭하면 끝에서 마지막 한 글자만 지우기

 

HTML

 

처음 계획은 각 연산자마다 함수를 만들어서 기능을 구현하는 것이었습니다. 따라서 연산자마다 다른 class를 지정했었는데 다시 생각해보니 eval() 함수를 사용하면 생각보다 쉽게 만들 수 있을 것 같아 숫자와 연산자에 동일한 'input' class를

적용해주고 한 번에 불러올 수 있도록 만들었습니다.

 

<div class="container">
    <input type="text" class="inputBox" placeholder="0">
    <div>
      <button class="removeLast">BACK</button>
      <button class="clear">CE</button>
      <button class="clear">C</button>
      <button class="calculate">=</button>
    </div>
    <div>
      <button class="input">7</button>
      <button class="input">8</button>
      <button class="input">9</button>
      <button class="input">/</button>
    </div>
    <div>
      <button class="input">4</button>
      <button class="input">5</button>
      <button class="input">6</button>
      <button class="input">*</button>
    </div>
    <div>
      <button class="input">1</button>
      <button class="input">2</button>
      <button class="input">3</button>
      <button class="input">-</button>
    </div>
    <div>
      <button class="input">0</button>
      <button>NONE</button>
      <button>NONE</button>
      <button class="input">+</button>
    </div>
  </div>

 

CSS

 

디자인은 '자바스크립트 계산기'라는 키워드로 검색하여 가장 심플해 보이는 것을 참고하여 간단히 만들어 보았습니다.

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }

  .container {
    width: 500px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #BFB8DA;
    border-radius: 20px;

  }

  button {
    width: 100px;
    height: 50px;
    background: #6F5F90;
    border: 0;
    border-radius: 5px;
    color: white;
    margin-bottom: 5px;
    font-size: 20px;
  }

  input {
    width: 410px;
    height: 50px;
    margin-bottom: 20px;
    border-radius: 10px;
    bordeR: 0;
    background: #F5F2E3;
    font-size: 20px;
  }

 

JS

 

먼저 처음에 숫자, 연산자 등을 클릭하면 해당 값이 input 창에 나타나는 코드를 작성하였습니다. 클래스 명이 input인 

것들을 한꺼번에 불러왔기 때문에 forEach 반복문을 사용해주었습니다. 

    const back = document.querySelector(".removeLast")
    const clear = document.querySelector(".clear")
    const calculate = document.querySelector(".calculate")
    const inputs = document.querySelectorAll(".input")
    const inputBox = document.querySelector(".inputBox")


    //input 창에 입력하는 기능 구현
    inputs.forEach((input) => {
      const inputExp = () => {
        inputBox.value += input.innerText;
      }
      input.addEventListener("click", inputExp)
    })

 

그리고 eval() 함수를 사용하여 '='을 클릭했을 때 input 창에 있는 값을 계산하는 기능을 구현하였습니다

    //계산하는 기능 구현
    const result = () => {
      inputBox.value = eval(inputBox.value)
    }
    calculate.addEventListener("click", result)

 

마지막으로 'CE', 'C', 'BACK' 버튼의 기능을 구현하였습니다.

 // CE, C 버튼은 같은 기능으로 입력 창의 내용을 모두 지운다.(처음처럼 0 출력)
    clear.addEventListener("click", function () {
      inputBox.value = '';
    })
    
    
 //BACK 버튼을 누르면 입력창의 마지막 문자를 지운다.
    back.addEventListener("click", function () {
      inputBox.value = inputBox.value.substr(0, inputBox.value.length - 1)
    })

 

 

 

 

디자인 참고

https://velog.io/@minn602/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-%EA%B3%84%EC%82%B0%EA%B8%B0-%EB%A7%8C%EB%93%A4%EA%B8%B0