Recent Posts
Recent Comments
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Today
Total
관리 메뉴

DH의 개발 공부로그

[ToyProject] 계산기 만들기를 통한 함수 공부! 본문

프로젝트

[ToyProject] 계산기 만들기를 통한 함수 공부!

DeveloperDH 2022. 10. 26. 15:05
728x90

순서도

폴더구조

Link

https://shape2ee.github.io/javascript-class/calculator/index.html

HTMLE 코드

<!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" />
    <title>계산기</title>
    <link rel="stylesheet" href="./css/minireset.css" />
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <main>
      <div class="grid">
        <input readonly id="operator" />
        <input readonly id="result" type="number" />
        <div class="row row1">
          <button id="num-7">7</button>
          <button id="num-8">8</button>
          <button id="num-9">9</button>
          <button id="plus">+</button>
        </div>
        <div class="row row2">
          <button id="num-4">4</button>
          <button id="num-5">5</button>
          <button id="num-6">6</button>
          <button id="minus">-</button>
        </div>
        <div class="row row3">
          <button id="num-1">1</button>
          <button id="num-2">2</button>
          <button id="num-3">3</button>
          <button id="divide">/</button>
        </div>
        <div class="row row4">
          <button id="clear">C</button>
          <button id="num-0">0</button>
          <button id="calculate">=</button>
          <button id="multiply">*</button>
        </div>
      </div>
    </main>

    <script src="./calculator.js"></script>
  </body>
</html>

CSS 코드

@charset "utf-8";

main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.grid {
  display: grid;
  gap: 12px;
  grid-template-rows: repeat(5, 80px);
  grid-template-columns: repeat(4, calc(25% - 9px));
  width: 50%;
  max-width: 300px;
}

.grid #operator {
  grid-column: 1 / span 1;
  text-align: center;
}

.grid #result {
  grid-column: 2 / span 3;
  padding: 10px;
  text-align: right;
}

.grid .row {
  grid-column: span 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

물론 구조를 더욱 단순하게 하고 코드를 더 짧게 할 수도 있을 것 같았지만,
우선 공부를 위해서 작업을 하는 중이기 때문에 구조도 나누어서 작업해보고,
CSS에서도 계산기 모양이 grid로 표현하기 좋을 것 같아서 grid로 작업을 해보았습니다.

JavaScript 코드

기본셋팅

let numOne = "";
let numTwo = "";
let operator = "";
const $operator = document.querySelector("#operator");
const $result = document.querySelector("#result");

숫자버튼에 대한 코드

const onClickButtonNum = (event) => {
  if (!operator) {
    // 비어있다
    numOne += event.target.textContent;
    $result.value += event.target.textContent;
    return;
  }
  // 비어있지 않다
  if (!numTwo) {
    // 숫자2가 없으면 칸을 비워라
    $result.value = "";
  }
  numTwo += event.target.textContent;
  $result.value += event.target.textContent;
};

document.querySelector("#num-0").addEventListener("click", onClickButtonNum);
document.querySelector("#num-1").addEventListener("click", onClickButtonNum);
document.querySelector("#num-2").addEventListener("click", onClickButtonNum);
document.querySelector("#num-3").addEventListener("click", onClickButtonNum);
document.querySelector("#num-4").addEventListener("click", onClickButtonNum);
document.querySelector("#num-5").addEventListener("click", onClickButtonNum);
document.querySelector("#num-6").addEventListener("click", onClickButtonNum);
document.querySelector("#num-7").addEventListener("click", onClickButtonNum);
document.querySelector("#num-8").addEventListener("click", onClickButtonNum);
document.querySelector("#num-9").addEventListener("click", onClickButtonNum);

연산기호에 대한 코드

const onClickOperate = (op) => () => {
  if (numTwo) {
    switch (operator) {
      case "+":
        $result.value = parseInt(numOne) + parseInt(numTwo);
        break;
      case "-":
        $result.value = parseInt(numOne) - parseInt(numTwo);
        break;
      case "/":
        $result.value = parseInt(numOne) / parseInt(numTwo);
        break;
      case "*":
        $result.value = parseInt(numOne) * parseInt(numTwo);
        break;
      default:
        break;
    }
    $operator.value = "";
    numOne = $result.value;
    numTwo = "";
  }

  if (numOne) {
    operator = op;
    $operator.value = op;
  } else {
    alert("숫자를 먼저 입력해주세요!");
  }
};

document.querySelector("#plus").addEventListener("click", onClickOperate("+"));
document.querySelector("#minus").addEventListener("click", onClickOperate("-"));
document.querySelector("#divide").addEventListener("click", onClickOperate("/"));
document.querySelector("#multiply").addEventListener("click", onClickOperate("*"));

계산과 초기화 셋팅

document.querySelector("#calculate").addEventListener("click", () => {
  if (numTwo) {
    switch (operator) {
      case "+":
        $result.value = parseInt(numOne) + parseInt(numTwo);
        break;
      case "-":
        $result.value = parseInt(numOne) - parseInt(numTwo);
        break;
      case "/":
        $result.value = parseInt(numOne) / parseInt(numTwo);
        break;
      case "*":
        $result.value = parseInt(numOne) * parseInt(numTwo);
        break;
      default:
        break;
    }
    $operator.value = "";
    numOne = $result.value;
    operator = "";
    numTwo = "";
  } else {
    alert("숫자를 입력해주세요");
  }
});

document.querySelector("#clear").addEventListener("click", () => {
  numOne = "";
  numTwo = "";
  operator = "";
  $operator.value = "";
  $result.value = "";
});

출처

인프런 강의

ZeroCho TV Youtube 주소

728x90
저작자표시 비영리 동일조건

'프로젝트' 카테고리의 다른 글

[Toyproject] 자바스크립트로 슈팅게임 만들기!  (0) 2022.10.07
ToyProject #01 가위바위보 게임 - 2  (0) 2022.07.30
ToyProject #01 가위바위보 게임 - 1  (0) 2022.07.29
[#1] 롯데시네마 리디자인!  (0) 2022.07.19
'프로젝트' Related Articles more
Comments