Final

src/components/CalcComp.vue

@@ -1,25 +1,25 @@
 <template>
     <div class="calculator">
         <div class="display">{{current || '0'}}</div>
-        <div class="btn">C</div>
-        <div class="btn">+/-</div>
-        <div class="btn">%</div>
-        <div class="btn">/</div>
+        <div class="btn operator" @click="clear">C</div>
+        <div class="btn operator">+/-</div>
+        <div class="btn operator" @click="procent">%</div>
+        <div class="btn operator" @click="divide">/</div>
         <div class="btn" @click="append(7)">7</div>
         <div class="btn" @click="append(8)">8</div>
         <div class="btn" @click="append(9)">9</div>
-        <div class="btn">*</div>
-        <div class="btn">4</div>
-        <div class="btn">5</div>
-        <div class="btn">6</div>
-        <div class="btn">-</div>
-        <div class="btn">1</div>
-        <div class="btn">2</div>
-        <div class="btn">3</div>
-        <div class="btn" @click="add">+</div>
-        <div class="btn">0</div>
-        <div class="btn">.</div>
-        <div class="btn" @click="equal">=</div>
+        <div class="btn operator" @click="times">*</div>
+        <div class="btn" @click="append(4)">4</div>
+        <div class="btn" @click="append(5)">5</div>
+        <div class="btn" @click="append(6)">6</div>
+        <div class="btn operator" @click="minus">-</div>
+        <div class="btn" @click="append(1)">1</div>
+        <div class="btn" @click="append(2)">2</div>
+        <div class="btn" @click="append(3)">3</div>
+        <div class="btn operator" @click="add">+</div>
+        <div class="btn nula" @click="append(0)">0</div>
+        <div class="btn ">.</div>
+        <div class="btn operator" @click="equal">=</div>
     </div>
 </template>
 
@@ -29,24 +29,60 @@ export default{
         return{
             current: '',
             previous: null,
-            operator: null
+            operator: null,
+            operatorClicked: false
         }
     },
     methods:{
+        // vedlejší metody
+        //vyčičtění
+        clear() {
+            this.current = "";
+        },
+        //přídaní čísla
        append(number) {
-        this.current += number;
+        if (this.operatorClicked)
+        {
+            this.current="";
+            this.operatorClicked= false;
+        }
+        this.current= `${this.current}${number}`;
        },
+       //ošetření vstupu
        setPrevious(){
         this.previous = this.current;
-        this.current = '';
+        this.operatorClicked = true;
        },
+       //Jednotlive operace
+       //sčítání
        add() {
         this.operator = (a,b) => a + b;
         this.setPrevious();
        },
+       //Odčítání
+       minus(){
+        this.operator = (a,b) => a - b;
+        this.setPrevious();
+       },
+       //Dělení
+       divide(){
+        this.operator = (a,b) => a / b;
+        this.setPrevious();
+       },
+       //Násobení
+       times() {
+        this.operator = (a,b) => a * b;
+        this.setPrevious();
+       },
+       //Procento
+       procent() {
+        this.current = this.current / 100;
+       },
+       //VÝSLEDEK
        equal() {
-        this.current = this.operator(parseFloat(this.current),parseFloat(this.previous));
-       }
+        this.current = this.operator(parseFloat(this.previous),parseFloat(this.current));
+       this.previous = null;
+    }
     }
 }
 </script>
@@ -70,4 +106,13 @@ background-color: lightgray;
 border: 1px solid gray;
 }
 
+.nula {
+    grid-column: 1/3;
+}
+
+.operator {
+    background-color: orange;
+    color: whitesmoke;
+}
+
 </style>