Skip to content

Commit

Permalink
Merge pull request #4 from SergeyKalabin/master
Browse files Browse the repository at this point in the history 
Решил задачи 2 модуля - 3, 4, 5.
  • Loading branch information
@jsru-1
jsru-1 authored Dec 25, 2024
2 parents 32db421 + a1313e4 commit 79aa99e
Show file tree
Hide file tree
Showing 4 changed files with 141 additions and 70 deletions.
4 changes: 2 additions & 2 deletions 02-basics-2/20-broken-map/MapApp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ export default defineComponent({

setup() {
// Реактивные переменные для хранения координат метки
let x = ref(0);
let y = ref(0);
const x = ref(0);
const y = ref(0);

/**
* Обработчик клика по карте для установки координат метки
Expand Down
47 changes: 38 additions & 9 deletions 02-basics-2/30-calculator/CalculatorApp.js
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,55 @@
import { defineComponent } from 'vue'
import { defineComponent, ref, computed, } from 'vue'

export default defineComponent({
name: 'CalculatorApp',

setup() {},
setup() {

const operand1 = ref(0);

const operand2 = ref(0);

const operator = ref('sum');

const result = computed(() => {
switch (operator.value) {
case 'sum':
return operand1.value + operand2.value
case 'subtract':
return operand1.value - operand2.value
case 'multiply':
return operand1.value * operand2.value
case 'divide':
return operand1.value / operand2.value
default:
return operand1.value + operand2.value;
}
})

return {
operand1,
operand2,
operator,
result,
}
},

template: `
<div class="calculator">
<input type="number" aria-label="First operand" />
<input type="number" aria-label="First operand" v-model="operand1" />
<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="operator"/>➕</label>
<label><input type="radio" name="operator" value="subtract" v-model="operator"/>➖</label>
<label><input type="radio" name="operator" value="multiply" v-model="operator"/>✖</label>
<label><input type="radio" name="operator" value="divide" v-model="operator"/>➗</label>
</div>
<input type="number" aria-label="Second operand" />
<input type="number" aria-label="Second operand" v-model="operand2" />
<div>=</div>
<output>0</output>
<output>{{ result }}</output>
</div>
`,
})
30 changes: 23 additions & 7 deletions 02-basics-2/40-marked-emails/MarkedEmailsApp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,19 +32,35 @@ export const emails = [
export default defineComponent({
name: 'MarkedEmailsApp',

setup() {},
setup() {

const emailsArrow = ref(emails);

const inputEmail = ref('');

const filteredEmails = computed(() => {
return emailsArrow.value.map(email => ({
email,
marked: email.toLowerCase().includes( inputEmail.value.toLowerCase() ) && inputEmail.value !== '',
}))
})

return {
emailsArrow,
inputEmail,
filteredEmails,
}
},

template: `
<div>
<!-- {{ filteredEmails }} -->
<div class="form-group">
<input type="search" aria-label="Search" />
<input type="search" aria-label="Search" v-model.trim="inputEmail" />
</div>
<ul aria-label="Emails">
<li>
Eliseo@gardner.biz
</li>
<li class="marked">
Jayne_Kuhic@sydney.com
<li v-for="email in filteredEmails" :class="{ 'marked': email.marked }">
{{ email.email }}
</li>
</ul>
</div>
Expand Down
130 changes: 78 additions & 52 deletions 02-basics-2/50-selected-meetup/SelectedMeetupApp.js
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,104 @@
import { defineComponent } from 'vue'
// import { getMeetup } from './meetupsService.ts'
import { defineComponent, ref, watch } from 'vue'
import { getMeetup } from './meetupsService.ts'

export default defineComponent({
name: 'SelectedMeetupApp',

setup() {},
setup() {
const currentId = ref(1)
const meetupTitle = ref('')

const pages = [
{
id: 'meetup-id-1',
name: 'meetupId',
value: 1,
},
{
id: 'meetup-id-2',
name: 'meetupId',
value: 2,
},
{
id: 'meetup-id-3',
name: 'meetupId',
value: 3,
},
{
id: 'meetup-id-4',
name: 'meetupId',
value: 4,
},
{
id: 'meetup-id-5',
name: 'meetupId',
value: 5,
},
]

const prevMeetup = () => {
currentId.value--
}

const nextMeetup = () => {
currentId.value++
}

const fetchMeetups = async id => {
try {
const meetup = await getMeetup(id)
meetupTitle.value = meetup.title
} catch (e) {
console.error(e)
return ''
}
}

watch(
currentId,
newId => {
fetchMeetups(newId)
},
{ immediate: true },
)

return {
meetupTitle,
currentId,
prevMeetup,
nextMeetup,
pages,
}
},

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="currentId === 1" @click="prevMeetup">Предыдущий</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">
<input
id="meetup-id-2"
class="radio-group__input"
type="radio"
name="meetupId"
value="2"
/>
<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">
<div v-for="page in pages" :key="page.id" class="radio-group__button">
<input
id="meetup-id-5"
v-model="currentId"
class="radio-group__input"
type="radio"
name="meetupId"
value="5"
:id="page.id"
:name="page.name"
:value="page.value"
/>
<label for="meetup-id-5" class="radio-group__label">5</label>
<label :for="page.id" class="radio-group__label">{{ page.value }}</label>
</div>
</div>
<button class="button button--secondary" type="button">Следующий</button>
<button class="button button--secondary" type="button" :disabled="currentId === 5" @click="nextMeetup">Следующий</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">{{meetupTitle}}</h1>
</div>
</div>
</div>
`,
})
})

0 comments on commit 79aa99e

Please sign in to comment.