3е занятие все задачи

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

@@ -1,25 +1,32 @@
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
   name: 'CounterApp',
 
-  setup() {},
+  setup() {
+      const counter = ref(0);
+
+      return {counter}
+  },
 
   template: `
     <div class="counter">
       <button
         class="button button--secondary"
         type="button"
         aria-label="Decrement"
-        disabled
+        :disabled="counter <= 0"
+        @click="counter--"
       >➖</button>
 
-      <span class="count" data-testid="count">0</span>
+      <span class="count" data-testid="count">{{ counter }}</span>
 
       <button
         class="button button--secondary"
         type="button"
         aria-label="Increment"
+        :disabled="counter >= 5"
+        @click="counter++"
       >➕</button>
     </div>
   `,

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

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

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

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

02-basics-2/40-marked-emails/MarkedEmailsApp.js

@@ -1,52 +1,66 @@
-import { computed, defineComponent, ref } from 'vue'
+import {computed, defineComponent, ref} from 'vue'
 
 // Значения взяты из https://jsonplaceholder.typicode.com/comments
 export const emails = [
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
-  '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
 ]
 
 export default defineComponent({
-  name: 'MarkedEmailsApp',
+    name: 'MarkedEmailsApp',
 
-  setup() {},
+    setup() {
+        const search = ref('');
 
-  template: `
-    <div>
-      <div class="form-group">
-        <input type="search" aria-label="Search" />
-      </div>
-      <ul aria-label="Emails">
-        <li>
-          [email protected]
-        </li>
-        <li class="marked">
-          [email protected]
-        </li>
-      </ul>
-    </div>
-  `,
+        const filteredEmails = computed(() => {
+            const arr = [];
+            emails.forEach(email => arr.push({emailValue: email, isFlagged: search.value && email.toLowerCase().includes(search.value.toLowerCase())}));
+            return arr;
+        })
+
+        return {
+            search,
+            filteredEmails
+        }
+    },
+
+    template: `
+        <div>
+            <div class="form-group">
+                <input v-model="search" type="search" aria-label="Search"/>
+            </div>
+            <ul aria-label="Emails">
+                <li
+                    v-for="(email, index) in filteredEmails"
+                    :key="index"
+                    :class="{'marked': email.isFlagged}"
+                >
+                    {{ email.emailValue }}
+                </li>
+            </ul>
+        </div>
+    `,
 })