계산기 만들기

기본적인 계산기를 만들었습니다.

 

<form action="" name="cal">
   <table>
      <caption>계산기</caption>
      <tbody>
         <tr>
            <th colspan="4"><input type="text" name="result" value="0"></th>
         </tr>
         <tr>
            <td><input type="button" value="7"></td>
            <td><input type="button" value="8"></td>
            <td><input type="button" value="9"></td>
            <td><input type="button" value="+"></td>
         </tr>
         <tr>
            <td><input type="button" value="4"></td>
            <td><input type="button" value="5"></td>
            <td><input type="button" value="6"></td>
            <td><input type="button" value="-"></td>
         </tr>
         <tr>
            <td><input type="button" value="1"></td>
            <td><input type="button" value="2"></td>
            <td><input type="button" value="3"></td>
            <td><input type="button" value="*"></td>
         </tr>
         <tr>
            <td colspan="2"><input type="button" value="0"></td>
            <td><input type="button" value="%"></td>
            <td><input type="button" value="/"></td>
         </tr>
         <tr>
            <td colspan="2"><input type="button" class="cls_btn" value="clear"></td>
            <td colspan="2"><input type="button" class="result_btn" value="="></td>
         </tr>
      </tbody>
   </table>
</form>

 

caption {
   font-size: 32px;
}

table {
   width: 320px;
   border-collapse: collapse;
}

table,
th {
   background: #333;
}

th {
   padding: 0 10px 0 0;
   height: 80px;
}

td {
   padding: 0;
   height: 75px;
   border: 1px solid #333;
   text-align: center;
}

th>input {
   padding: 0;
   width: 100%;
   border: none;
   background: #333;
   color: #fff;
   text-align: right;
   font-size: 48px;
}

td>input[type='button'] {
   width: 100%;
   height: 100%;
   font-size: 36px;
   color: #333;
   border: none;
}

td>input[type='button']:hover {
   background: #999;
}

td:last-child>input {
   background: orange;
   color: #fff;
}

 

var $inp = $('form[name="cal"]'),
   $input = $inp.find('input'),
   $clsBtn = $('.cls_btn'),
   $resultBtn = $('.result_btn'),
   $result = $inp.find('input[name="result"]');


function clr() {
   $result.val(0);
}

// 계산 결과 처리 함수
function myResult() {
   var calc = eval($result.val());

   $result.val(calc);
}

function calc(value) {

   if ($result.val() == 0) {
      $result.val('');
   }

   var val = $result.val() + value;
   $result.val(val);

}

$input.on('click', function() {

   var $inputValue = $(this).val();

   if ($inputValue != '=' && $inputValue != 'clear') {
      calc($inputValue);
   }

});

$clsBtn.on('click', clr);

// try catch문으로 예외처리
$resultBtn.on('click', function(){
   try {
      myResult();
   } 
   catch {
      $result.val('error!');
   }
});

 

jsfiddle로 보기

https://jsfiddle.net/hyuckjin/cduqj3x2/1/