자바스크립트 계산기 만들어보기

버건디·2022년 8월 15일
자바스크립트
0

자바스크립트 프로젝트

목록 보기
2/15
post-thumbnail

- 순서도

🔻 HTML창 구현하기

<html lang="en">

<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>계산기</title>
</head>
<body>
    <div id="container">
        <input readonly id="operator">
        <input readonly type="number" id="result">
        <div class="row">
            <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">
            <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">
            <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">
            <button id="clear">C</button>
            <button id="num-0">0</button>
            <button id="calculate">=</button>
            <button id="multiply">x</button>
        </div>
    </div>
</body>

</html>

계산기 창이 만들어졌다.

🔻 자바스크립트 내에서 변수 선언 해놓기

document.addEventListener("DOMContentLoaded", () => {
  const result = document.querySelector("#result"); // 결과창 나타내는 인풋창
  const operator = document.querySelector("#operator"); // 연산자 창
  const num0 = document.querySelector("#num-0");
  const num1 = document.querySelector("#num-1");
  const num2 = document.querySelector("#num-2");
  const num3 = document.querySelector("#num-3");
  const num4 = document.querySelector("#num-4");
  const num5 = document.querySelector("#num-5");
  const num6 = document.querySelector("#num-6");
  const num7 = document.querySelector("#num-7");
  const num8 = document.querySelector("#num-8");
  const num9 = document.querySelector("#num-9");
  const plus = document.querySelector("#plus"); // +
  const minus = document.querySelector("#minus"); // -
  const divide = document.querySelector("#divide"); // /
  const multiply = document.querySelector("#multiply"); // *
  const calculate = document.querySelector("#calculate"); // =
  const clear = document.querySelector("#clear"); // c
  let numOne = ""; // 첫번째 숫자 받을 변수
  let numTwo = ""; // 두번째 숫자 받을 변수
});

🔻 숫자를 입력했을때, 값을 numOne이나 numTwo 변수에 넣어주기

  const clickNum = (e) => {
    if (operator.value == "") {
      // 연산자 칸이 비어있다면
      numOne += e.target.textContent;
      result.value += e.target.textContent;
    } else if (operator.value !== "") {
      //연산자 칸이 비어있지 않다면
      numTwo += e.target.textContent;
      result.value += e.target.textContent;
    }
  };

🔻 연산자를 입력했을때, 값을 numOne이나 numTwo 변수에 넣어주기

  const clickOperator = (e) => {
    if (result.value == "") { // 결과값이 비어있는데 연산자를 클릭한다면
      alert("숫자를 먼저 입력하세요!");
    } else {
      result.value = ""; // 결과값 나타내는 인풋창 초기화
      operator.value = e.target.textContent;
    }
  };

🔻 계산 버튼 눌렀을때 이벤트 구현

  const clickCalculate = () => {
    if (operator.value == "+") {
      result.value = Number(numOne) + Number(numTwo);
    }
    if (operator.value == "-") {
      result.value = numOne - numTwo;
    }
    if (operator.value == "*") {
      result.value = numOne * numTwo;
    }
    if (operator.value == "/") {
      result.value = numOne / numTwo;
    }
  };

🔻 초기화 버튼 눌렀을때 이벤트 구현

  const setClear = () => {
    result.value = "";
    operator.value = "";
    numOne = "";
    numTwo = "";
  };

🔻 전체 자바스크립트 코드

document.addEventListener("DOMContentLoaded", () => {
  const result = document.querySelector("#result"); // 결과창 나타내는 인풋창
  const operator = document.querySelector("#operator"); // 연산자 창
  const num0 = document.querySelector("#num-0");
  const num1 = document.querySelector("#num-1");
  const num2 = document.querySelector("#num-2");
  const num3 = document.querySelector("#num-3");
  const num4 = document.querySelector("#num-4");
  const num5 = document.querySelector("#num-5");
  const num6 = document.querySelector("#num-6");
  const num7 = document.querySelector("#num-7");
  const num8 = document.querySelector("#num-8");
  const num9 = document.querySelector("#num-9");
  const plus = document.querySelector("#plus"); // +
  const minus = document.querySelector("#minus"); // -
  const divide = document.querySelector("#divide"); // /
  const multiply = document.querySelector("#multiply"); // *
  const calculate = document.querySelector("#calculate"); // =
  const clear = document.querySelector("#clear"); // c
  let numOne = ""; // 첫번째 숫자 받을 변수
  let numTwo = ""; // 두번째 숫자 받을 변수

  //숫자를 클릭했을때의 이벤트

  const clickNum = (e) => {
    if (operator.value == "") {
      // 연산자 칸이 비어있다면
      numOne += e.target.textContent;
      result.value += e.target.textContent;
      console.log("resultValue" + result.value);
    } else if (operator.value !== "") {
      numTwo += e.target.textContent;
      result.value += e.target.textContent;
      console.log("resultValue2" + result.value);
    }
  };

  // 연산자를 클릭했을때의 이벤트

  const clickOperator = (e) => {
    if (result.value == "") {
      alert("숫자를 먼저 입력하세요!");
    } else {
      result.value = "";
      operator.value = e.target.textContent;
    }
  };

  const clickCalculate = () => {
    if (operator.value == "+") {
      result.value = Number(numOne) + Number(numTwo);
      console.log("결과값은" + result.value);
    }
    if (operator.value == "-") {
      result.value = numOne - numTwo;
      console.log("결과값은" + result.value);
    }
    if (operator.value == "*") {
      result.value = numOne * numTwo;
      console.log("결과값은" + result.value);
    }
    if (operator.value == "/") {
      result.value = numOne / numTwo;
      console.log("결과값은" + result.value);
    }
  };

  const setClear = () => {
    result.value = "";
    operator.value = "";
    numOne = "";
    numTwo = "";
  };

  num0.addEventListener("click", clickNum);
  num1.addEventListener("click", clickNum);
  num2.addEventListener("click", clickNum);
  num3.addEventListener("click", clickNum);
  num4.addEventListener("click", clickNum);
  num5.addEventListener("click", clickNum);
  num6.addEventListener("click", clickNum);
  num7.addEventListener("click", clickNum);
  num8.addEventListener("click", clickNum);
  num9.addEventListener("click", clickNum);

  plus.addEventListener("click", clickOperator);
  minus.addEventListener("click", clickOperator);
  divide.addEventListener("click", clickOperator);
  multiply.addEventListener("click", clickOperator);

  calculate.addEventListener("click", clickCalculate);
  clear.addEventListener("click", setClear);
});

🔍 더 구현해보아야 할 것

  1. = 버튼 눌렀을때, operator 창 초기화

  2. 값 3개 받을수 있도록 해보기

  3. 변수도 그렇고 이벤트리스너도 그렇고 중복되는 부분이 많은데, 저걸 좀 더 간결하게 나타내볼순 없을까?

일단 순서도는 짜놨었는데, 저 순서대로 코드를 짰다기보다 사실 계산기를 직접 두드려보면서 코드를 작성한 것

같다. 처음에 숫자를 올바르게 입력했는가? 저 부분도 연산자 클릭 이벤트를 구현하면서 만들어야 했던거라서

순서도를 더 치밀하게 짜지 못한것이 큰것 같다. 먼저 만들려고 하기보다 그 전에 순서도를 짜보는 연습이 더

중요하니 순서도를 제대로 짜서, 그것을 보면서 코드를 작성해보자.

profile
버건디
https://brgndy.me/ 로 옮기는 중입니다 :)
이전 포스트

자바스크립트 끝말잇기

다음 포스트

자바스크립트 숫자야구 만들기

0개의 댓글