Merge pull request #6 from luquii2/master

карта

02-basics-2/10-counter/CounterApp.js

@@ -12,6 +12,7 @@ export default defineComponent({
         plus: count.value > 4 ? true : false,
       }
     })
+
     return {
       count,
       counter,
@@ -35,7 +36,7 @@ export default defineComponent({
         type="button"
         aria-label="Increment"
         :disabled="counter.plus"
-        @click="count++"
+        @click="++count"
       >➕</button>
     </div>
   `,

02-basics-2/20-broken-map/MapApp.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch } from 'vue'
+import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
   name: 'MapApp',
@@ -13,27 +13,21 @@ export default defineComponent({
      * @param {MouseEvent} event
      */
     function handleClick(event) {
-      x = event.offsetX
-      y = event.offsetY
+      x.value = event.offsetX + 'px'
+      y.value = event.offsetY + 'px'
     }
 
-    // Следим за X и Y для установки нового положения
-    watch([x, y], () => {
-      // Находим метку и изменяем её положение
-      const map = document.querySelector('.pin')
-      map.style.left = `${x}px`
-      map.style.top = `${y}px`
-    })
-
     return {
       handleClick,
+      x,
+      y,
     }
   },
 
   template: `
     <div class="map" @click="handleClick">
       <img class="map-image" src="./map.png" alt="Map" draggable="false" />
-      <span class="pin">📍</span>
+      <span :style="{top: y, left: x}" class="pin">📍</span>
     </div>
   `,
 })

02-basics-2/30-calculator/CalculatorApp.js

@@ -1,26 +1,52 @@
-import { defineComponent } from 'vue'
+import { defineComponent, ref, computed } from 'vue'
 
 export default defineComponent({
   name: 'CalculatorApp',
 
-  setup() {},
+  setup() {
+
+    const calc = ref({
+      firstOperand: 0,
+      secondOperand: 0,
+      operator: null,
+    })
+
+    const output = computed(() => {
+      switch (calc.value.operator) {
+        case "sum":
+          return calc.value.firstOperand + calc.value.secondOperand;
+        case "subtract":
+          return calc.value.firstOperand - calc.value.secondOperand;
+        case "multiply":
+          return calc.value.firstOperand * calc.value.secondOperand;
+        case "divide":
+          return calc.value.firstOperand / calc.value.secondOperand;
+        default:
+          return 0
+      }
+    })
+
+    return {
+      calc,
+      output,
+    }
+  },
 
   template: `
     <div class="calculator">
-      <input type="number" aria-label="First operand" />
-
+      <input v-model="calc.firstOperand"  type="number" aria-label="First operand" />
       <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 v-model="calc.operator" type="radio" name="operator" value="sum"/>➕</label>
+        <label><input v-model="calc.operator" type="radio" name="operator" value="subtract"/>➖</label>
+        <label><input v-model="calc.operator" type="radio" name="operator" value="multiply"/>✖</label>
+        <label><input v-model="calc.operator" type="radio" name="operator" value="divide"/>➗</label>
       </div>
 
-      <input type="number" aria-label="Second operand" />
+      <input v-model="calc.secondOperand" type="number" aria-label="Second operand" />
 
       <div>=</div>
 
-      <output>0</output>
+      <output>{{ output }}</output>
     </div>
   `,
 })