계산기 소스 리뷰

<template>
  <div class="calculator">
    <div class="display">{{current || '0'}}</div>
    <div @click="clear" class="btn">C</div>
    <div @click="sign" class="btn">+/-</div>
    <div @click="percent" class="btn">%</div>
    <div @click="divied" class="btn orange">÷</div>
    <div @click="append('7')" class="btn">7</div>
    <div @click="append('8')" class="btn">8</div>
    <div @click="append('9')" class="btn">9</div>
    <div @click="times" class="btn orange">×</div>
    <div @click="append('4')" class="btn">4</div>
    <div @click="append('5')" class="btn">5</div>
    <div @click="append('6')" class="btn">6</div>
    <div @click="minus" class="btn orange">－</div>
    <div @click="append('1')" class="btn">1</div>
    <div @click="append('2')" class="btn">2</div>
    <div @click="append('3')" class="btn">3</div>
    <div @click="add" class="btn orange">＋</div>
    <div @click="append('0')" class="btn twocal">0</div>
    <div @click="dot" class="btn">.</div>
    <div @click="equal" class="btn orange">=</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      previous: null,
      current: '',
      operator: null,
      operatorClicked: false,
    }
  },
  methods: {
    clear() {
      this.current = ''
    },
    sign() {
      this.current = this.current.charAt(0) === '-' ?
        this.current.slice(1) :`-${this.current}`;
    },
    percent() {
      this.current = `${parseFloat(this.current) / 100}`
    },
    append(number) {
      if (this.operatorClicked) {
        this.current = '';
        this.operatorClicked = false;
      }
      this.current = `${this.current}${number}`;
    },
    dot() {
      if ( this.current.indexOf('.') === -1) {
        this.append('.')
      }
    },
    setPrevious() {      
      this.previous = this.current;
      this.operatorClicked = true;
    },
    divied() {
      this.operator = (a,b) => a / b ;
      this.setPrevious();
    },
    times() {
      this.operator = (a,b) => a * b ;
      this.setPrevious();
    },
    minus() {
      this.operator = (a,b) => a - b ;
      this.setPrevious();
    },
    add() {
      this.operator = (a,b) => a + b ;
      this.setPrevious();
    },
    equal() {
      this.current = `${this.operator(
        parseFloat(this.current),
        parseFloat(this.previous)
      )}`;
      this.previous = null;
    }
  }
}
</script>

<style scoped>

 .calculator {
    margin: 0 auto;
    width:400px;
    font-size: 35px;
    line-height: 50px;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(50px, auto);
  } 
  .display {
    grid-column: 1 / 5;
    background-color: #333;
    color:white;
  }
  .twocal {
    grid-column: 1 / 3;
  }
  .btn {
    background-color: #f2f2f2;
    border: 1px solid #333;
  }
  .orange {
    background-color: orange;
    color: white;
  }
  
</style>

Calculator.Vue 단일 컴포넌트 하나로 작업한다.

큰 프로젝트도 아니고 하나면 충분하지..

여기서 display: grid;  grid-template-columns 와 grid-auto-rows 는 못보던 속성이다.

 

display: grid는 말 그대로 디스플레이의 속성을 그리드로 바꿔준다.

grid-template-colums: 반복한다(1행에 4개, 1fr(일정한 너비))

grid-auto-rows : 최소크기값(최소값,자동) // 자동을 넣으면 셀 크기에 맞춰 변한다

서로 다른 class값을 주어

왼쪽 3열에는 회색을 오른쪽 1열에는 orange색을 넣었다

n값으로 리팩토링이 가능할거같긴 한데 일단 나중에 시도하자

.display는 출력값이 표시되는곳이다. 1번째 라인부터 5 라인 전까지 차지하게하고

twocal을  밑에 숫자 0 부분이다. 1번째 라인부터 3번째 라인 전까지 차지하게한다

혹여나 이해가 되지 않을까 숫자로 표시해놓았다.

이걸로 style값은 끝이다.

이제부터 기능을 구현하자

Template