비전공자 개발일기

Javascript - Calculator 본문

Javascript

Javascript - Calculator

HiroDaegu 2021. 9. 19. 22:19
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
  <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>Calculator</title>
    <link rel="stylesheet" href="style.css" />
    <script defer src="main.js"></script>
  </head>
  <body>
    <form name="cal">
      <table>
        <caption>
          계산기
        </caption>
        <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>
      </table>
    </form>
  </body>
</html>
caption {
  font-size: 32px;
  margin: 20px;
}

table {
  width: 320px;
  text-align: center;
  margin: 10px auto;
}

table, th {
  background: #333;
}

th {
  padding-right: 10px;
  height: 80px;
}

td {
  height: 75px;
  text-align: center;
}

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

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

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

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

 

const inp = document.forms["cal"];
const input = inp.getElementsByTagName("input");
const cls_btn = document.getElementsByClassName("cls_btn")[0];
const result_btn = document.getElementsByClassName("result_btn");

// 계산기 초기화
function clear() {
  inp["result"].value = "";
}

// 계산기 입력 처리 함수
function calculate(value) {
  // 값이 입력될 경우 0 제거
  if(inp["result"].value == 0) {
    inp["result"].value = "";
  }

  // 입력 받은 값을 결과창에 출력
  inp["result"].value += value;
}

// 계산 결과 처리 함수
function my_result() {
  let result = document.forms["cal"]["result"];
  let calc = eval(result.value); // eval() -> 입력값을 코드로 인식하게 하는 함수
  
  // 결과창에 표시
  inp["result"].value = calc;
}

// 숫자 및 사칙연산 버튼
for(let i = 0 ; i < input.length ; i++) {
  // 숫자와 사직 연산자만 입력 처리
  if(input[i].value != "=" && input[i].value != "clear") {
    input[i].onclick = function() {
      calculate(this.value);
    }
  }
}

// 초기화 버튼
cls_btn.onclick = function() {
  clear();
}

// 결과 버튼
result_btn.onclick = function() {
  try{
    my_result();
  } 
  catch(err) {
    let result = inp["result"];
    result.value = "입력 오류";
  }
}
728x90
LIST

'Javascript' 카테고리의 다른 글

Javascript - Dynamic Banner  (0) 2021.09.22
Javascript - 3D Page  (0) 2021.09.21
Javascript axios - search  (0) 2021.09.18
Javascript forEach, map, filter, some, every, reduce  (0) 2021.09.15
Javascript Simple update  (0) 2021.09.11
'Javascript' Related Articles more