Vue.Js Calculator

I do realize this has become more of a journal than a useful code tutorial tracker, but I don’t care. No one’s reading this but me anyway.

So I had a bit of a long, uncreative pause after completing the crash course. I am fighting a big battle with my “drive”. Working 4 hours a day from home without any assignments and communication with the office due to doing just coding is getting to me and I am losing my will power to work at my job. Working at my side projects and learning comes equally hard. All I want to do is lift weights.

But, I did go down the vue.js path again. I do realize I’m at the very beginning, but I didn’t proceed with a more advanced, explicit tutorial yet: instead, I figured I’d do something simpler and fun, so I went and built a calculator, following this tutorial:

This was super easy and super fun. I learned to use methods, I upped some javascript, and aside of adding the cat I resolved all the bugs this dude left behind. Here’s how the result looked. I wish I knew how to publish my working app here, but hopefully I will get to that. For now, just a pic:

This done, I will proceed to do the more demanding tutorial by some lady who dives deeper into vue.js concepts, but more on that next time. For now, here’s the code with my stuff added.

<template>
  <div>
      <h1>Calculator</h1>
      <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="divide" class="btn operator">÷</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 operator">*</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 operator">-</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="plus" class="btn operator">+</div>
        <div @click="append('0')" class="btn zero">0</div>
        <div @click="dot()" class="btn">.</div>
        <div @click="equals" class="btn operator">=</div>

      </div>

  </div>
  
</template>

<script>
export default {
    data(){
        return{
            current:'',
            previous: null,
            operator: null,
            operatorClicked: false,
        }

    },
    methods:{
        clear() {
            this.current = ''
        },
        sign() {
            // fixes adds - to 0 or nothing bug
            if ( this.current !== '0' && this.current !== '' ) {
                this.current = this.current.charAt(0) === '-' ? 
                this.current.slice(1) : `-${this.current}`
            } 
        },
        percent() {
            if ( this.current !== '0' && this.current !== '' ) {
                 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() {
            // fixes the can't continue to just click operators and proceed to do math without clicking = every time bug
            if (this.previous !== null) {
                this.equals()
            }
            this.previous = this.current;
            this.operatorClicked = true;
        },
        divide() {
            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();
        },
        plus() {
            this.operator = (a, b) => a + b;
            this.setPrevious();
        },
        equals() {
            this.current = `${this.operator(
                                parseFloat(this.previous), 
                                parseFloat(this.current))
                            }` ;
            this.previous = null;
            // fixes the doesn't clear after equals bug
            this.operatorClicked = true;
        },
    }

}
</script>

<style>

.calculator {
    width: 400px;
    margin: 0 auto;
    display:grid;
    font-size: 40px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(50px, auto);
}

.display {
    grid-column: 1 / 5;
    background-color: rgb(66, 65, 65);
    color:white;
}

.zero {
    grid-column: 1 / 3;
}

.btn {
    background-color: rgb(116, 111, 111);
    border: 1px solid rgb(36, 34, 34);
    cursor: pointer
}

.operator {
    background-color: orange;
    text: white;    
}
</style>

Leave a Reply

Your email address will not be published. Required fields are marked *