added 2nd module tasks

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

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

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

@@ -32,19 +32,30 @@ export const emails = [
 export default defineComponent({
   name: 'MarkedEmailsApp',
 
-  setup() {},
+  setup() {
+    const searchQuery = ref('')
+
+    const markedEmails = computed(() => {
+      return emails.map(email => {
+        const isMarked = searchQuery.value && email.toLowerCase().includes(searchQuery.value.toLowerCase())
+        return { email, isMarked }
+      })
+    })
+
+    return {
+      searchQuery,
+      markedEmails,
+    }
+  },
 
   template: `
     <div>
       <div class="form-group">
-        <input type="search" aria-label="Search" />
+        <input type="search" v-model="searchQuery" aria-label="Search" />
       </div>
       <ul aria-label="Emails">
-        <li>
-          [email protected]
-        </li>
-        <li class="marked">
-          [email protected]
+        <li v-for="{ email, isMarked } in markedEmails" :key="email" :class="{ marked: isMarked }">
+          {{ email }}
         </li>
       </ul>
     </div>

02-basics-2/50-selected-meetup/SelectedMeetupApp.js

@@ -1,78 +1,74 @@
-import { defineComponent } from 'vue'
-// import { getMeetup } from './meetupsService.ts'
+import { defineComponent, onMounted, ref, watch } from 'vue'
+import { getMeetup } from './meetupsService.ts'
 
 export default defineComponent({
   name: 'SelectedMeetupApp',
 
-  setup() {},
+  setup() {
+    const pageNumber = ref(1)
+    const buttons = ref([1, 2, 3, 4, 5])
+    const meetup = ref({})
+
+    const fetchMeetup = async id => {
+      meetup.value = await getMeetup(id)
+    }
+
+    onMounted(async () => {
+      await fetchMeetup(pageNumber.value)
+    })
+
+    watch(pageNumber, async newValue => {
+      await fetchMeetup(newValue)
+    })
+
+    const pickNextMeetup = () => {
+      if (pageNumber.value < 5) {
+        pageNumber.value++
+      }
+    }
+
+    const pickPrevMeetup = () => {
+      if (pageNumber.value > 1) {
+        pageNumber.value--
+      }
+    }
+
+    return {
+      pageNumber,
+      buttons,
+      meetup,
+      pickNextMeetup,
+      pickPrevMeetup,
+    }
+  },
 
   template: `
     <div class="meetup-selector">
       <div class="meetup-selector__control">
-        <button class="button button--secondary" type="button" disabled>Предыдущий</button>
+        <button class="button button--secondary" type="button" :disabled='pageNumber === 1' @click='pickPrevMeetup'>Предыдущий</button>
 
         <div class="radio-group" role="radiogroup">
-          <div class="radio-group__button">
-            <input
-              id="meetup-id-1"
-              class="radio-group__input"
-              type="radio"
-              name="meetupId"
-              value="1"
-            />
-            <label for="meetup-id-1" class="radio-group__label">1</label>
-          </div>
-          <div class="radio-group__button">
+          <div v-for='button in buttons' class="radio-group__button">
             <input
-              id="meetup-id-2"
+              :id="'meetup-id-' + button"
               class="radio-group__input"
               type="radio"
               name="meetupId"
-              value="2"
+              :value="button"
+              v-model='pageNumber'
             />
-            <label for="meetup-id-2" class="radio-group__label">2</label>
-          </div>
-          <div class="radio-group__button">
-            <input
-              id="meetup-id-3"
-              class="radio-group__input"
-              type="radio"
-              name="meetupId"
-              value="3"
-            />
-            <label for="meetup-id-3" class="radio-group__label">3</label>
-          </div>
-          <div class="radio-group__button">
-            <input
-              id="meetup-id-4"
-              class="radio-group__input"
-              type="radio"
-              name="meetupId"
-              value="4"
-            />
-            <label for="meetup-id-4" class="radio-group__label">4</label>
-          </div>
-          <div class="radio-group__button">
-            <input
-              id="meetup-id-5"
-              class="radio-group__input"
-              type="radio"
-              name="meetupId"
-              value="5"
-            />
-            <label for="meetup-id-5" class="radio-group__label">5</label>
+            <label :for="'meetup-id-' + button" class="radio-group__label">{{ button }}</label>
           </div>
         </div>
 
-        <button class="button button--secondary" type="button">Следующий</button>
+        <button class="button button--secondary" type="button" :disabled='pageNumber === 5' @click='pickNextMeetup'>Следующий</button>
       </div>
 
       <div class="meetup-selector__cover">
         <div class="meetup-cover">
-          <h1 class="meetup-cover__title">Some Meetup Title</h1>
+          <h1 class="meetup-cover__title">{{ meetup.title }}</h1>
         </div>
       </div>
-
     </div>
   `,
 })