Приноровился к angular 2+
:ease="Elastic.easeOut.config(1, 0.75)"
document.querySelector('input').addEventListener('input', e => {
const
val = e.target.value,
reg = RegExp(val, 'gi'),
keys = [ 'firstName', 'lastName' ];
document.querySelector('.autocomplete-suggestions__list').innerHTML = val && people
.map(n => keys.map(k => n[k]).join(' '))
.filter(n => (reg.lastIndex = 0, reg.test(n)))
.map(n => `<div>${n.replace(reg, '<strong>$&</strong>')}</div>`)
.join('');
});.html($(this).find('img')).html($(this).find('img').clone())
class App extends React.Component {
state = {
maxCount: 55,
people: [],
url: 'https://swapi.dev/api/people/',
}
fetchPeople() {
fetch(this.state.url).then(r => r.json()).then(r => {
this.setState(({ people, maxCount }) => ({
people: [ ...people, ...r.results ].slice(0, maxCount),
url: r.next,
}));
});
}
updateGenderCount() {
this.setState(({ people }) => ({
genderCount: people.reduce((acc, n) => {
acc[n.gender] = (acc[n.gender] || 0) + 1;
return acc;
}, {}),
}));
}
componentDidMount() {
this.fetchPeople();
}
componentDidUpdate(prevProps, prevState) {
const count = this.state.people.length;
if (count !== prevState.people.length) {
this.updateGenderCount();
if (this.state.url && count < this.state.maxCount) {
this.fetchPeople();
}
}
}
render() {
return (
<div>
<pre>{JSON.stringify(this.state.genderCount, null, 2)}</pre>
</div>
);
}
}.items-left, а проверяете количество .items-right. Думали, что класс сам собой заменится? Нет, так не будет.
$('#dateStart').trigger('change');this.dispatchEvent(new Event('input'));
document.querySelector('.items').addEventListener('click', function(e) {
const t = e.target;
if (t.classList.contains('item')) {
map.setCenter([ t.dataset.lat, t.dataset.lng ]);
}
});:curPage="defineCurPage":cur-page="defineCurPage".
const getImg = url => fetch(url)
.then(r => r.blob())
.then(blob => new Promise(resolve => {
const reader = new FileReader();
reader.addEventListener('loadend', () => resolve({ image: reader.result }));
reader.readAsDataURL(blob);
}));
document.querySelector('button').addEventListener('click', async () => {
const arrImg = await Promise.all(arr.map(n => getImg(`./images/${n}`)));
console.log(arrImg);
});data: () => ({
newTask: '',
items: {},
}),
watch: {
items: {
deep: true,
handler: val => localStorage.setItem('items', JSON.stringify(val)),
},
},
methods: {
addTask() {
const title = this.newTask.trim();
if (title) {
const id = 1 + Math.max(0, ...Object.values(this.items).flat().map(n => n.id));
this.items.A.push({ id, title });
} else {
alert('Введите текст задачи');
}
this.newTask = '';
},
},
created() {
let items = null;
try {
items = JSON.parse(localStorage.getItem('items'));
} catch (e) {}
this.items = items || дефолтное значение;
},<div>
<input placeholder="текст задачи" v-model="newTask">
<button @click="addTask">+</button>
</div>
<draggable
v-for="(v, k) in items"
v-model="items[k]"
:key="k"
:options="{ group: 'tasks' }"
element="ul"
class="connectedSortable"
>
<li v-for="item in v" :key="item.id">{{ item.title }}</li>
</draggable>const $items = $('.card');
const openedClass = 'card--opened';
const closedClass = 'card--closed';
const delay = 500;
const flip = $item => $item.removeClass(closedClass).addClass(openedClass);$items.each((i, n) => setTimeout(flip, (i + 1) * delay, $(n)));(function next(i) {
if (i < $items.length) {
setTimeout(() => {
flip($items.eq(i));
next(-~i);
}, delay);
}
})(0);let i = 0;
const intervalID = setInterval(() => {
flip($items.eq(i));
if (++i >= $items.length) {
clearInterval(intervalID);
}
}, delay);