From 2920da113b5b267ef364e29de85f52770e10e9e2 Mon Sep 17 00:00:00 2001
From: alexmenshikov <menshchikov.aleksandr@yandex.ru>
Date: Mon, 19 Aug 2024 00:50:33 +0700
Subject: [PATCH] calculator-app

---
 02-basics-2/30-calculator/CalculatorApp.js | 43 +++++++++++++++++-----
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/02-basics-2/30-calculator/CalculatorApp.js b/02-basics-2/30-calculator/CalculatorApp.js
index 381b03f..f06afce 100644
--- a/02-basics-2/30-calculator/CalculatorApp.js
+++ b/02-basics-2/30-calculator/CalculatorApp.js
@@ -1,26 +1,51 @@
-import { defineComponent } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 
 export default defineComponent({
   name: 'CalculatorApp',
 
-  setup() {},
+  setup() {
+    const firstNumber = ref(0);
+    const secondNumber = ref(0);
+    const picked = ref('sum');
+    const result = ref(0);
+
+    watch([firstNumber, secondNumber, picked], () => {
+      switch(picked.value) {
+        case 'sum':
+          return result.value = firstNumber.value + secondNumber.value
+        case 'subtract':
+          return result.value = firstNumber.value - secondNumber.value
+        case 'multiply':
+          return result.value = firstNumber.value * secondNumber.value
+        case 'divide':
+          return result.value = firstNumber.value / secondNumber.value
+      }
+    });
+
+    return {
+      firstNumber,
+      secondNumber,
+      picked,
+      result,
+    }
+  },
 
   template: `
     <div class="calculator">
-      <input type="number" aria-label="First operand" />
+      <input type="number" aria-label="First operand" v-model="firstNumber" />
 
       <div class="calculator__operators">
-        <label><input type="radio" name="operator" value="sum"/>➕</label>
-        <label><input type="radio" name="operator" value="subtract"/>➖</label>
-        <label><input type="radio" name="operator" value="multiply"/>✖</label>
-        <label><input type="radio" name="operator" value="divide"/>➗</label>
+        <label><input type="radio" name="operator" value="sum" v-model="picked" />➕</label>
+        <label><input type="radio" name="operator" value="subtract" v-model="picked" />➖</label>
+        <label><input type="radio" name="operator" value="multiply" v-model="picked" />✖</label>
+        <label><input type="radio" name="operator" value="divide" v-model="picked" />➗</label>
       </div>
 
-      <input type="number" aria-label="Second operand" />
+      <input type="number" aria-label="Second operand" v-model="secondNumber" />
 
       <div>=</div>
 
-      <output>0</output>
+      <output>{{ result }}</output>
     </div>
   `,
 })