<template>
  <div>
    <div class="calculator"  style="border: 3px solid #0059a8;width: 338px; height: 405px;">
      <div class="prev">{{ calculator.previous || '' }} {{ calculator.sign }}</div>
      <div class="display">{{ calculator.current || '0' }}</div>
      <div @click="percent" class="btn operator">%</div>
      <div @click="sqrt" class="btn operator">&#x221a;</div>
      <div @click="pow" class="btn operator">x²</div>
      <div @click="inverse" class="btn operator">1/x</div>
      <div @click="clearAll" class="btn operator2 c">C</div>
      <div @click="del" class="btn operator2">🔙</div>
      <div @click="divide" class="btn operator2">÷</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 operator2">x</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 operator2">-</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 operator2">+</div>
      <div @click="sign" class="btn">±</div>
      <div @click="append('0')" class="btn">0</div>
      <div @click="dot" class="btn">.</div>
      <div @click="equal" class="btn operator2">=</div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      calculator: {
        previous: null,
        current: '',
        operator: null,
        operatorClicked: false,
        sign: '',
        end: false
      }
    }
  },
  methods: {
    clearAll() {
      this.calculator.current = ''
    },
    sign() {
      if(this.calculator.current != '')
        this.calculator.current = this.calculator.current.charAt(0) === '-' ?
          this.calculator.current.slice(1) : `-${this.calculator.current}`
    },
    percent() {
      this.calculator.current = `${parseFloat(this.calculator.current) / 100}`
    },
    append(number) {
      if(number == '0' && this.calculator.current == '')
        this.calculator.current = ''
      else {
        if(this.calculator.operatorClicked) {
          this.calculator.current = ''
          this.calculator.operatorClicked = false
        }
        this.calculator.current = `${this.calculator.current}${number}`
      }
    },
    dot() {
      if (this.calculator.current.indexOf('.') === -1)
        this.append('.')
    },
    setPrevious() {
      this.calculator.previous = this.calculator.current
      this.calculator.operatorClicked = true;
    },
    divide() {
      this.calculator.operator = (a, b) => a / b
      this.setPrevious()
      this.calculator.sign = '÷'
    },
    times() {
      this.calculator.operator = (a, b) => a * b
      this.setPrevious()
      this.calculator.sign = 'x'
    },
    minus() {
      this.calculator.operator = (a, b) => a - b
      this.setPrevious()
      this.calculator.sign = '-'
    },
    add() {
      this.calculator.operator = (a, b) => a + b
      this.setPrevious()
      this.calculator.sign = '+'
    },
    equal() {
      this.calculator.current = this.calculator.operator(
        parseFloat(this.calculator.previous),
        parseFloat(this.calculator.current)
      )
      this.calculator.previous = null
      this.calculator.sign = ''
      this.calculator.end = true
    },
    del() {
      if(this.calculator.current)
        this.calculator.current = this.calculator.current.slice(0, -1)
    },
    sqrt() {
      if(parseFloat(this.calculator.current) >= 0)
        this.calculator.current = Math.sqrt(parseFloat(this.calculator.current))
    },
    pow() {
      this.calculator.current = Math.pow(parseFloat(this.calculator.current),2)
    },
    inverse() {
      if(parseFloat(this.calculator.current) > 0)
        this.calculator.current = 1 / parseFloat(this.calculator.current)
    }
  }
}
</script>



<style scoped>
* { font-size: 25px }
.calculator {
  margin: 0 auto;
  width: 240px;
  height: 340px;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(30px, auto);
  /* box-shadow: 5px 10px 8px #8888882e; */
  position: absolute;
  z-index: 999999;
}
.display {
  padding: 2px;
  grid-column:  1 / 5;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: rgb(255, 250, 223);
  color: #343434;
}
.prev {
  grid-column:  1 / 5;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: rgb(212, 243, 255);
  color: #343434;
  border-bottom: 1px solid #34343461;
  height: 40px;
}
.c {
  grid-column:  1 / 3;
}
.btn {
  background-color: #f2f2f2;
  border: 1px solid #33333345;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0;
}
.btn:hover { background-color: rgba(216, 216, 216, 0.68); cursor: pointer; }
.operator { background-color:rgba(1, 90, 168, 0.88); color: white; }
.operator:hover { background-color: rgb(1, 90, 168); cursor: pointer; }
.operator2 { background-color: rgba(1, 90, 168, 0.88); color: white; }
.operator2:hover { background-color: rgb(1, 90, 168); cursor: pointer; }
</style>