[JS] 계산기 구현하기

JS

let calc_result = "";

      document.addEventListener("DOMContentLoaded", () => {
        document.querySelector(".numpad").addEventListener("mousedown", (e) => {
          console.log(e.target.tagName + e.target.innerText);
          switch (e.target.innerText) {
            case "AC":
              calc_result = "";
              document.querySelector(".result").innerText = "0";
              break;
            case "=":
              document.querySelector(".result").innerText = calc(calc_result);
              calc_result = "";
              break;
            default:
              if (!(calc_result == "" && e.target.innerText == "0")) {
                calc_result += "" + e.target.innerText;
                document.querySelector(".result").innerText = calc_result;
              }
              break;
          }
        });
      });

      function calc(fomula) {
        return new Function("return " + fomula)();
      }

JS 수정 - 20240330

<script>
      let calc_result = "";

      document.addEventListener("DOMContentLoaded", () => {
        document.querySelector(".numpad").addEventListener("mousedown", (e) => {
          switch (e.target.innerText) {
            case "AC":
              calc_result = "";
              document.querySelector(".result").innerText = "0";
              break;
            case "=":
              document.querySelector(".result").innerText = calc(calc_result);
              calc_result = "";
              break;
            default:
              if (!(calc_result == "" && "*/+-".includes(e.target.innerText))) {
                // 입력, 출력 숫자가 12글자가 넘으면 초기화, alert
                if (calc_result.length > 12) {
                  alert("계산 범위를 초과했습니다.");
                  calc_result = "";
                } else if (
                  "*/+-".includes(calc_result.charAt(calc_result.length - 1)) &&
                  "+-*/".includes(e.target.innerText)
                ) {
                  alert("연산 기호를 연속으로 사용할 수 없습니다.");
                } else {
                  calc_result += e.target.innerText;
                  document.querySelector(".result").innerText = calc_result;
                }
              }
              break;
          }
        });
      });

      function calc(fomula) {
        return new Function("return " + fomula)();
      }
    </script>

css 참고