JavaScript 간단하게 구현한 계산기 (버블링 활용)

코딩을 배우면서 제일 먼저 만드는 프로그램이, 로또번호 만들기, 그리고 계산기인 것 같다. 

 

아래의 계산기는 정말 짧은 소스로 구현을 할 수 있었다. 

 

일반적으로 계산기를 구현하려면, 계산기의 버튼 하나하나에 이벤트를 걸고 거기서 얻은 값을 연산하는 방법인데,

소개할 소스는 아래와 같다. 정말 짧지 않은가?

window.addEventListener("load",function(){
  var section=document.querySelector(".main");
  var numberPad=section.querySelector(".number-pad");
  var disPlay=section.querySelector(".display");
 
  numberPad.onclick=function(e){
    console.log(e.target.id);
    var key = e.target.id;
    if (key == "equal") {
      console.log(disPlay.value);
      disPlay.value=eval(disPlay.value)} else 
      if (key == "clear") {
        disPlay.value="";} else{
    disPlay.value+=key;}
  }
})
 

구현한 계산기는 ↓

bryancalc.netlify.app/

문과적으로 설명하겠다.

 

일단 HTML에서 계산기의 형태를 꾸며주자.

input 입력창과 16개 셀의 테이블로 이뤄져 있다. 

<section class="main">
    <input type="text" class="display" value="" disabled>
    <table class="number-pad">
      <tr >
        <td id="1">1</td>
        <td id="2">2</td>
        <td id="3">3</td>
        <td id="-">-</td>
      </tr>
      <tr>
        <td id="4">4</td>
        <td id="5">5</td>
        <td id="6">6</td>
        <td id="*">*</td>
      </tr>
      <tr>
        <td id="7">7</td>
        <td id="8">8</td>
        <td id="9">9</td>
        <td id="/">/</td>
      </tr>
      <tr>
        <td id="clear">C</td>
        <td id="0">0</td>
        <td id="equal">=</td>
        <td id="+">+</td>
      </tr>
    </table>
  </section>