const months = Object.fromEntries(Array.from(
{ length: 12 },
(_, i) => [ new Date(0, i).toLocaleString('ru-RU', { month: 'long' }), i ]
));
function parseDate(str) {
const [ , month, day, year, hour, minute ] = str.match(/(\S+) (\d+), (\d+) (\d+):(\d+)/);
return +new Date(year, months[month.toLowerCase()], day, hour, minute);
}
const checkboxContainer = document.querySelector('.options');
const itemsContainer = document.querySelector('.box');
const hiddenClass = 'hidden';
:not
):function getCheckedSelector(container) {
const [ not, has ] = Array.prototype.reduce.call(
container.querySelectorAll('input'),
(acc, n) => (acc[+n.checked].push(`.${n.value}`), acc),
[ [], [] ]
);
return has.join('') + (not.length ? `:not(${not.join(',')})` : '');
}
checkboxContainer.addEventListener('change', function() {
const selector = getCheckedSelector(this);
for (const n of itemsContainer.children) {
n.classList.toggle(hiddenClass, !n.matches(selector));
}
});
const toggleHidden = (selector, state) => itemsContainer
.querySelectorAll(selector)
.forEach(n => n.classList.toggle(hiddenClass, state));
checkboxContainer.addEventListener('change', e => {
toggleHidden(':scope > *', true);
toggleHidden(getCheckedSelector(e.currentTarget), false);
});
const checkboxes = [...checkboxContainer.querySelectorAll('input')];
const onChange = function() {
this.forEach(({ classList: cl }) => {
cl.toggle(hiddenClass, checkboxes.some(n => n.checked !== cl.contains(n.value)));
});
}.bind([...itemsContainer.children]);
checkboxes.forEach(n => n.addEventListener('change', onChange));
.data-accordion--summary-container.active > .dropdown {
display: block;
}
const itemSelector = '.data-accordion--summary-container';
const activeClass = 'active';
const toggle = el =>
el.parentNode.querySelectorAll(`:scope > ${itemSelector}`).forEach(n => {
n.classList[n === el ? 'toggle' : 'remove'](activeClass);
});
// применяем делегирование
document.body.addEventListener('click', ({ target: t }) => {
if (t.matches(itemSelector)) {
toggle(t);
}
});
// или, назначаем обработчик клика каждому элементу индивидуально
document.querySelectorAll(itemSelector).forEach(function(n) {
n.addEventListener('click', this);
}, e => e.currentTarget === e.target && toggle(e.target));
- acc[key] = [value];
+ (acc[key] ??= []).push(value);
const convertQueryStringToObject = str => Array
.from(new URLSearchParams(str))
.reduce((acc, n) => ((acc[n[0]] ??= []).push(n[1]), acc), {});
const convertQueryStringToObject = str => Array
.from(str.matchAll(/([^&]+)=([^&]+)/g))
.reduce((acc, [ , k, v ]) => (
Object.hasOwn(acc, k) || (acc[k] = []),
acc[k][acc[k].length] = v,
acc
), {});
работает, но кажется, что достаточно криво
let lvl = 0;
for (let i = LVLS.length; i--;) {
if (LVLS[i].exp <= EXP) {
lvl = LVLS[i].lv;
break;
}
}
переделать это во что-то более красивое
const lvl = LVLS.findLast(n => n.exp <= EXP)?.lv ?? 0;
const LVLS = [ 10, 25, 45, 70, 100 ];
const lvl = 1 + LVLS.findLastIndex(n => n <= EXP);
<button data-country="">Показать всё</button>
<button data-country="France">Франция</button>
<button data-country="Germany">Германия</button>
<button data-country="England">Англия</button>
const catalogEl = document.querySelector('#catalog-box');
let catalogArr = [];
const buttons = document.querySelectorAll('button[data-country]');
buttons.forEach(n => n.addEventListener('click', onClick));
function onClick({ target: t }) {
buttons.forEach(n => n.classList.toggle('active', n === t));
renderCatalog(t.dataset.country);
}
function renderCatalog(country) {
const toRender = country
? catalogArr.filter(n => n.tag === country)
: catalogArr;
catalogEl.innerHTML = toRender
.map(n => `
<div class="catalog__card" id="${n.id}">
<img src="${n.img}" alt="${n.alt}" class="catalog__card_img">
<p class="catalog__card_author">${n.author}</p>
<p class="catalog__card_name">${n.name}</p>
<p class="catalog__card_note">${n.note}</p>
<p class="catalog__card_price">${n.price}</p>
<button class="catalog__card_btn">${n.btn}</button>
</div>`)
.join('');
}
fetch('catalogBox.json')
.then(r => r.json())
.then(r => {
catalogArr = r;
buttons[0].click();
});
const obj1 = Object.fromEntries(arr1.map(n => [ n.name, n ]));
// или
const obj1 = arr1.reduce((acc, n) => (acc[n.name] = n, acc), {});
const newArr2 = arr2.map(n => ({ ...obj1[n.name], ...n }));
// или
const newArr2 = [];
for (let i = 0; i < arr2.length; i++) {
newArr2.push(Object.assign({}, obj1[arr2[i].name], arr2[i]));
}
arr2.forEach(n => Object
.entries(obj1[n.name] ?? {})
.forEach(([ k, v ]) => Object.hasOwn(n, k) || (n[k] = v))
);
// или
for (const n of arr2) {
const obj = obj1[n.name];
for (const k in obj) {
if (!n.hasOwnProperty(k)) {
n[k] = obj[k];
}
}
}
можно ли исключить объекты у которых не изменился value? То есть что бы этих объектов не было в итоговом массиве.
const newArr2 = arr2.reduce((acc, n) => (
obj1[n.name]?.value !== n.value && acc.push({ ...obj1[n.name], ...n }),
acc
), []);
function restrictChecked({
container,
selector = 'input[type="checkbox"]',
min = 0,
max = Infinity,
enableOnCancel = true,
}) {
const checkboxes = [...container.querySelectorAll(selector)];
const onChange = () => {
const countChecked = checkboxes.reduce((acc, n) => acc + n.checked, 0);
const minReached = countChecked <= min;
const maxReached = countChecked >= max;
checkboxes.forEach(n => n.disabled = minReached && n.checked || maxReached && !n.checked);
};
checkboxes.forEach(n => n.addEventListener('change', onChange));
onChange();
return () => checkboxes.forEach(n => {
n.disabled &&= !enableOnCancel;
n.removeEventListener('change', onChange);
});
}
function restrictChecked({
container,
selector = 'input[type="checkbox"]',
min = 0,
max = Infinity,
}) {
function onChange({ target: t }) {
if (t.matches(selector)) {
const countChecked = this.querySelectorAll(`${selector}:checked`).length;
t.checked ||= countChecked < min;
t.checked &&= countChecked <= max;
}
}
container.addEventListener('change', onChange);
return () => container.removeEventListener('change', onChange);
}
const addDepth = (val, depth = 0) =>
val instanceof Object
? Object.entries(val).reduce((acc, n) => (
acc[n[0]] = addDepth(n[1], depth + 1),
acc
), { depth })
: val;
const toString = (val, keys = []) =>
val instanceof Object
? Object.entries(val).map(([ k, v ]) => {
keys.push(k);
const result = toString(v, keys);
keys.pop();
return result;
}).join('&')
: `${keys.join('.')}=${val}`;
function toString(val) {
const result = [];
for (const stack = [ [ val, [] ] ]; stack.length;) {
const [ n, keys ] = stack.pop();
if (n instanceof Object) {
stack.push(...Object.entries(n).map(([ k, v ]) => [ v, [ ...keys, k ] ]).reverse());
} else {
result.push(`${keys.join('.')}=${n}`);
}
}
return result.join('&');
}
const units = [
[ 'де?н', 24 * 60 * 60 ],
[ 'час', 60 * 60 ],
[ 'мин', 60 ],
[ 'сек', 1 ],
].map(n => [ RegExp(`\\d+(?=\\s+${n[0]})`), n[1] ]);
const getSeconds = str =>
units.reduce((acc, n) => acc + n[0].exec(str) * n[1], 0);
getSeconds('2 часа 22 секунды') // 7222
getSeconds('99 минут') // 5940
getSeconds('1 час 1 минута 1 секунда') // 3661
getSeconds('1 день 23 часа 59 минут 60 секунд') // 172800
getSeconds('2 дня') // 172800
getSeconds('546 секунд и ещё 2 минуты') // 666
RegExp(`\\d+(?=\\s+${n[0]})`, 'g')
, а функция подсчёта секунд примет следующий вид:const getSeconds = str =>
units.reduce((seconds, [ reg, multiplier ]) => {
return [...str.matchAll(reg)].reduce((acc, n) => acc + n * multiplier, seconds);
}, 0);
// или
const getSeconds = str => units
.flatMap(n => (str.match(n[0]) ?? []).map(m => m * n[1]))
.reduce((acc, n) => acc + n, 0);
// или
const getSeconds = str => eval(units
.map(n => `${n[1]} * (${str.match(n[0])?.join('+') ?? 0})`)
.join('+')
);
getSeconds('1 секунда плюс 3 секунды плюс 5 секунд') // 9
getSeconds('21 день, 7 дней, да ещё 3 дня - всего секунд в мае месяце будет') // 2678400
.panel {
padding: 0 15px;
transition: all 0.4s;
height: 0;
overflow: hidden;
}
.faq-item.active .panel {
padding: 15px 15px 20px;
}
.faq-item.active .cross {
transform: rotate(45deg);
}
const containerSelector = '.faq-list';
const itemSelector = '.faq-item';
const headerSelector = '.accordion';
const contentSelector = '.panel';
const activeClass = 'active';
const toggle = item => item
?.closest(containerSelector)
?.querySelectorAll(itemSelector).forEach(n => {
const state = n === item && !n.classList.contains(activeClass);
const content = n.querySelector(contentSelector);
n.classList.toggle(activeClass, state);
content.style.height = `${state ? content.scrollHeight : 0}px`;
});
document.addEventListener('click', e => {
toggle(e.target.closest(headerSelector)?.closest(itemSelector));
});
// или
document.querySelectorAll(headerSelector).forEach(n => {
n.addEventListener('click', toggle.bind(null, n.closest(itemSelector)));
});
translate
элементу. А чтобы не делать отдельные обработчики клика всем кнопкам, можно записать им в data-атрибут информацию о том, на сколько какие координаты должна изменить данная кнопка.<button data-steps="1,0">right</button>
<button data-steps="-1,0">left</button>
<button data-steps="0,1">down</button>
<button data-steps="0,-1">up</button>
<button data-steps="1,1">right down</button>
<button data-steps="0,-2">double up</button>
const coord = [ 0, 0 ];
const stepSize = 30;
const box = document.querySelector('#box');
const buttons = document.querySelectorAll('[data-steps]');
buttons.forEach(n => n.addEventListener('click', onClick));
function onClick() {
this.dataset.steps.split(',').forEach((n, i) => coord[i] += n * stepSize);
box.style.transform = `translate(${coord.map(n => `${n}px`).join(',')})`;
}
const arr = [
[ 'author', 'Author - ' ],
[ 'name', 'Name' ],
[ 'currentTime', '00:00' ],
[ 'duration', '00:00' ],
];
for (const [ className, text ] of arr) {
titleElement.appendChild(create({
el: 'span',
className,
text,
}));
}
// или
titleElement.append(...arr.map(n => create({
el: 'span',
className: n[0],
text: n[1],
})));
// или, без всех этих ваших странных функций
document.querySelector('#root').innerHTML = `
<div id="title">${arr.map(n => `
<span class="${n[0]}">${n[1]}</span>`).join('')}
</div>
`;
const questionEl = document.querySelector('ul');
const resultsEl = document.querySelector('p span');
questionEl.addEventListener('change', showResults);
function showResults() {
resultsEl.innerText = Array.prototype.reduce.call(
questionEl.querySelectorAll('input[type="radio"]:checked'),
(acc, n) => acc + +n.value,
0
);
}
const getNestedData = (data, test) => Object
.values(data instanceof Object ? data : {})
.reduce((acc, n) => (
acc.push(...getNestedData(n, test)),
acc
), test(data) ? [ data ] : []);
const result = getNestedData(arr, n => n?.workControl?.includes?.('intermediate'));
function getNestedData(data, test) {
const result = [];
for (const stack = [ data ]; stack.length;) {
const n = stack.pop();
if (n instanceof Object) {
stack.push(...Object.values(n).reverse());
}
if (test(n)) {
result.push(n);
}
}
return result;
}
// или
function getNestedData(data, test) {
const result = [];
const stack = [];
for (let i = 0, arr = [ data ]; i < arr.length || stack.length; i++) {
if (i === arr.length) {
[ i, arr ] = stack.pop();
} else {
if (test(arr[i])) {
result.push(arr[i]);
}
if (arr[i] instanceof Object) {
stack.push([ i, arr ]);
[ i, arr ] = [ -1, Object.values(arr[i]) ];
}
}
}
return result;
}