계산기 프로그램

bi-sz·2020년 5월 15일
1

과제

목록 보기
2/5

여러 방식으로 해보다가 ,, 결국은 제대로 완성도 못하고 뜻대로 되지 않아서
이미 만들어진 코드를 보면서 이해해보기로 했다 .


오류 없이 잘 실행되는 모습이다.


HTML 코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>계산기</title>
  <link rel="stylesheet" href="calculator.css">
</head>
<body>
<div class="wrap">
  <div class="input-box">
    <div class="show-box"></div>
    <input id="numInput" type="text" placeholder="0">
  </div>
  <table>
    <tbody>
      <tr>
        <td colspan="3" class="col3"><button id="acBtn">AC</button></td>
        <td><button class="op">/</button></td>
      </tr>
      <tr>
        <td><button class="number">7</button></td>
        <td><button class="number">8</button></td>
        <td><button class="number">9</button></td>
        <td><button class="op">*</button></td>
      </tr>
      <tr>
        <td><button class="number">4</button></td>
        <td><button class="number">5</button></td>
        <td><button class="number">6</button></td>
        <td><button class="op">-</button></td>
      </tr>
      <tr>
        <td><button class="number">1</button></td>
        <td><button class="number">2</button></td>
        <td><button class="number">3</button></td>
        <td><button class="op">+</button></td>
      </tr>
      <tr>
        <td colspan="2" class="col2"><button class="number">0</button></td>
        <td><button class="number">.</button></td>
        <td><button class="op">=</button></td>
      </tr>
    </tbody>
  </table>
</div>
<script src="calculator.js"></script>
</body>
</html>

UTF-8

유니코드를 위한 가변 길이 문자 인코딩 방식 중 하나
가장 많이 사용되는 것으로 알고 있다.

link 는 말 그대로 링크 ,
href 는 Hypertext reference 로 하이퍼 텍스트 참조 이며, 파일의 위치를 나타낸다.
rel Relation ( 관계 ) 의 약자 이며, 링크된 대상과의 관계를 지정한다.

rel 은 불러오는 문서가 Stylesheet 이라고 정의를 하는 것이다.
style 로 HTML 안에 불러오기 위해 속성을 정의해 주는 것 .

table 을 이용하여 계산기의 틀을 만들어준다.


CSS 코드

table, tbody, tr, td, button {
 margin: 0;
 padding: 0;
}
button {
 width: 100px;
 height: 100px;
 font-size: 40px;
 color: #333;
 border: 1px solid #bbb;
 cursor: pointer;
}

여백, 버튼의 사이즈와 위치, 글씨의 크기 및 색삭, 테두리, 커서 등을 설정한다.

.wrap {
  width: 410px;
  margin: 50px auto 0 auto;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.input-box {
  position: relative;
  width: 100%;
  height: 100px;
  padding: 5px;
  box-sizing: border-box;
  text-align: center;
  background-color: #202020;
}
.show-box {
  color: #757575;
  text-align: right;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

입력박스와 결과박스 , 전체 형태 테두리 등의 사이즈와 색상 ,
그리고 글자가 가운데에 오게 설정되는 코드가 있다 .

#numInput {
  position: absolute;
  left: 7px;
  bottom: 5px;
  display: inline-block;
  padding: 3px;
  width: 94%;
  height: 60px;
  color: #fff;
  text-align: right;
  font-size: 50px;
  box-sizing: border-box;
  border: none;
  background-color: #202020;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
button.number {
  background-color: #efefef;
}
button.number:hover {
  background: #ddd;
}
button.number:active {
  background-color: #ccc;
}
button.op {
  background-color: #FF9B22;
}
button.op:hover {
  background-color: #f99112;
}
button.op:active {
  background-color: #EB7016;
}
.col2 button {
  width: 201px;
}
.col3 button {
  width: 303px;
}

버튼에 커서를 갖다대면 확인이 가능하게끔 색이 톤다운 된다.
하얀색 숫자 부분에는 회색, 수식 부분에는 진한 주황색.

그리고 버튼을 클릭 했을때 파란 테두리가 생긴다.


JS 코드

"use strict"
let numbers = document.querySelectorAll(".number")
let opText = document.querySelectorAll(".op")
let numInput = document.querySelector("#numInput")
let acBtn = document.querySelector("#acBtn")
let equalBtn = document.querySelector("#equal")
let showBox = document.querySelector(".show-box")

"use strict" 는 "strict mode" 에서 실행되어야 한다고 정의하는 것이다.

strict mode 에서는 선언되지 않은 변수는 사용될 수 없다.
사용할 숫자, 수식 , 입력, 등의 변수들을 선언해준다.

strict mode 에서는 선언없이 변수를 사용하는 것과

선언없이 객체를 사용하는 것, 그리고 변수를 삭제하는 것은 허용되지 않는다.

let checkBtn = false
let checkPreNum = false
for (let i = 0; i < numbers.length; i++) {
  numbers[i].addEventListener('click', inputNum)
}

연산 버튼 클릭시 input에 새로 입력받기.
preNum 과 nextNum 구분하기.
숫자버튼 클릭 시 inputNum 함수 호출.

function inputNum() {
  if (checkBtn)
    clearNum()
  if (cal.preOp === '=' && checkBtn === true)
    clearShowBox()
  var inputText = this.innerHTML
  numInput.value += inputText
  showBox.innerHTML += inputText
  checkBtn = false
}

해당 element의 content 를 input box에 뿌린다.

function clearNum() {
    numInput.value = ""
    console.log("clear")
}
function clearShowBox() {
  showBox.innerHTML = ""
}

클리어 버튼을 누르면 입력창 내용이 삭제되게 한다.

let cal = {
  result: 0,
  preNum: 0,
  nextNum: 0,
  preOp: null,
  op: null,
  calculator: function() {
    var inputText = this.innerHTML
    cal.op = inputText
    showBox.innerHTML += inputText
    checkBtn = true
    if (!checkPreNum) {
      cal.preNum = Number(numInput.value)
      console.log(cal.preNum)
      checkPreNum = true
    } else {
      cal.nextNum = Number(numInput.value)
      console.log(cal.nextNum)
      clearNum()
      cal.resultFn(cal.preOp)
      cal.preNum = cal.result
      if (cal.op == '=') {
        checkPreNum = false
        showBox.innerHTML += cal.result +', '
      }
    }
    cal.preOp = cal.op
  },
  resultFn: function(op) {
    switch (op) {
    case '+':
    cal.result = cal.preNum + cal.nextNum
    console.log("result"+cal.result)
    break;
    case '-':
    cal.result = cal.preNum - cal.nextNum
    console.log("result"+cal.result)
    break;
    case '*':
    cal.result = cal.preNum * cal.nextNum
    console.log("result"+cal.result)
    break;
    case '/':
    cal.result = cal.preNum / cal.nextNum
    console.log("result"+cal.result)
    break;
    }
    numInput.value = cal.result
  }
}

계산기 객체

숫자를 눌렀을 때 cal.preNum 에 값이 들어가게 하고 다음 값을 누르면
이전값 + ' ' 이어서 숫자가 입력 박스에 보여지게 한다.
= 버튼을 눌렀을 때 결과 박스에 연산된 값을 보여준다.

switch~case문을 사용해서
각 수식마다 연산을 정의해준다.

for (let i = 0; i < opText.length; i++) {
  opText[i].addEventListener('click', cal.calculator)
}
acBtn.addEventListener('click', function() {
  numInput.value = ""
  showBox.innerHTML = ""
  cal.result, cal.preNum, cal.nextNum = 0
  checkPreNum = false
})

연산자버튼 클릭시 이벤트를 등록한다.


https://codepen.io/bi_/pen/OJyoZwE

2개의 댓글

comment-user-thumbnail
2020년 5월 15일

버그 몇가지 있어서 알려드릴게요!

  1. 숫자 연산자 숫자 연산자 = 누르면 버그가 있네요. 예를 들어 설명하면 2 + 2 + = 순으로 누르면 2 + 2가 계산되어 showBox에는 4가 나와있고 그 상태에서 + = 를 누르면 4 + 4가 계산되어 값이 8이 나옵니다. 곱하기 같은경우도 4 * 4 가 되어 16이 나와요.

  2. AC 후 =버튼을 두번누르면 이전 숫자가 나옵니다.

  3. 이건 버그는 아닌데 나누기 0은 따로 처리를 안해주셨어요 값이 Infinity로 나오기는 하지만 다른 언어로 작성하게 된다면 런타임에러가 발생할 수 있습니다!

1개의 답글