<div>
<input id="password">
</div>
<div>
<div>Сложность пароля: <span id="strength_percent">0</span>%</div>
<progress id="strength_progress" max="100" value="0"></progress>
</div>
<div id="errors"></div>
const validations = [
{
test: val => val.length >= 8,
message: 'пароль должен содержать хотя бы 8 символов',
},
{
test: val => /[A-ZА-ЯЁ]/.test(val),
message: 'пароль должен содержать хотя бы 1 большую букву',
},
{
test: val => /[a-zа-яё]/.test(val),
message: 'пароль должен содержать хотя бы 1 маленькую букву',
},
{
test: val => /[^\s\da-zа-яё]/i.test(val),
message: 'пароль должен содержать хотя бы 1 специальный символ (не пробел, букву или цифру)',
},
{
test: val => /\d/.test(val),
message: 'пароль должен содержать хотя бы 1 цифру',
},
];
document.querySelector('#password').addEventListener('input', ({ target: { value } }) => {
const errors = validations.reduce((acc, n) => (
n.test(value) || acc.push(n.message),
acc
), []);
const strength = (validations.length - errors.length) / validations.length * 100;
document.querySelector('#strength_progress').value = strength;
document.querySelector('#strength_percent').innerText = strength | 0;
document.querySelector('#errors').innerHTML = errors
.map(n => `<p>${n}</p>`)
.join('');
});
const sorted = arr
.map(n => [
n,
+new URLSearchParams(n.querySelector('a').href.split('?').pop()).get('value') || Infinity,
])
.sort((a, b) => a[1] - b[1])
.map(n => n[0]);
parentEl.append(...Array
.from(parentEl.querySelectorAll('a'), n => [
n.parentNode,
Number(n.getAttribute('href').match(/(?<=value=)\d+/)) || Infinity,
])
.sort((a, b) => a[1] - b[1])
.map(n => n[0])
);
class="xxx"
. Повесить делегированный обработчик, внутри которого проверять наличие этого класса:document.addEventListener('input', ({ target: t }) => {
if (t.classList.contains('xxx')) {
t.previousElementSibling.querySelector('.p_value').innerText = t.value;
}
});
const cols = document.querySelectorAll('.col');
cols.forEach(n => {
n.addEventListener('mouseover', onHover);
n.addEventListener('mouseout', onHover);
});
function onHover(e) {
const index = [...this.children].findIndex(n => n.contains(e.target));
if (index !== -1) {
const t = e.type === 'mouseover';
cols.forEach(n => n.children[index].classList.toggle('hovered', t));
}
}
document.querySelectorAll('.nav-about a').forEach((n, i) => n.attributes.href.value += i + 1);
$('button').click(() => $('select').prop('selectedIndex', 0));
document.querySelector('button').addEventListener('click', () => {
document.querySelectorAll('select').forEach(n => {
// Какие тут есть варианты:
// 1. Установить индекс выбранного option'а
n.selectedIndex = 0;
// 2. Установить select'у значение option'а, который должен быть выбран
// (чтобы заработало, надо будет добавить value="" option'ам)
n.value = '';
// 3. Назначить true свойству selected того option'а, на который надо переключиться
n.options[0].selected = true;
// или
// n.children[0].selected = true;
// n.firstElementChild.selected = true;
});
});
const concat = (...arrs) =>
arrs.reduce((acc, arr) => (
arr.forEach((n, i) => (acc[i] ??= []).push(...n)),
acc
), []);
const arr = concat(arr1, arr2);
fetch('https://gorest.co.in/public/v1/posts')
.then(r => r.json())
.then(r => {
document.body.insertAdjacentHTML('beforeend', `
<ul>${r.data.map(n => `
<li>
<a>${n.title}</a>
</li>`).join('')}
</ul>
`);
});
const diff = (...arrs) => Array
.from(arrs
.flatMap(n => [...new Set(n)])
.reduce((acc, n) => acc.set(n, acc.has(n)), new Map))
.reduce((acc, n) => (n[1] || acc.push(n[0]), acc), []);
const arr = diff(arr1, arr2);
document.querySelector('.calc_container').addEventListener('input', e => {
const block = e.target.closest('.calc_block');
const price = +block.querySelector('.price span').innerText;
const count = +e.target.value;
block.querySelector('.summ span').innerText = price * count;
const orderData = Array
.from(e.currentTarget.querySelectorAll('.calc_block'), n => ({
name: n.querySelector('label').innerText,
count: +n.querySelector('.count').value,
sum: +n.querySelector('.summ span').innerText,
}))
.filter(n => n.count);
document.querySelector('.total_block span').innerText = orderData
.reduce((acc, n) => acc + n.sum, 0);
document.querySelector('textarea').value = orderData
.map(n => `Название: ${n.name} | Количество: ${n.count}`)
.join('\n');
});
const chunkedAndTransposed = ([ headers, ...arr ], chunkSize) =>
arr.reduce((acc, n, i) => (
(i % chunkSize) || acc.push(headers.map(m => [ m ])),
n.forEach((m, j) => acc.at(-1)[j].push(m)),
acc
), []);
const result = chunkedAndTransposed(arr, 2);
const chunkedAndTransposed = (arr, chunkSize, defautlValue = null) =>
Array.from({ length: Math.ceil((arr.length - 1) / chunkSize) }, (_, iChunk) =>
Array.from({ length: arr[0].length }, (_, iCol) =>
Array.from({ length: chunkSize + 1 }, (_, iRow) =>
iRow ? arr[iChunk * chunkSize + iRow]?.[iCol] ?? defautlValue : arr[0][iCol]
)
)
);
const result = chunkedAndTransposed(arr, 5);
const duplicates = Object.fromEntries(Object
.entries(arr.reduce((acc, n, i) => (
(acc[n] ??= []).push(i),
acc
), {}))
.filter(n => n[1].length > 1)
);
Map
:const duplicates = new Map(Array
.from(arr.reduce((acc, n, i) => (
acc.set(n, acc.get(n) ?? []).get(n).push(i),
acc
), new Map))
.filter(n => n[1].length > 1)
);
const longestStr = arr.reduce((max, n) => max.length > n.length ? max : n, '');
// или
const longestStr = arr.sort((a, b) => b.length - a.length)[0];
// или
const longestStr = arr.reduce((acc, n) => (acc[n.length] = n, acc), []).pop();
function max(data, key = n => n) {
const getVal = key instanceof Function ? key : n => n[key];
let maxVal = null;
let maxItem = null;
for (const n of data) {
const val = getVal(n);
if (val > maxVal || maxVal === null) {
maxVal = val;
maxItem = n;
}
}
return maxItem;
}
const longestStr = max(arr, 'length');
const getRepetition = (arr, repeated) => Array
.from(arr.reduce((acc, n) => acc.set(n, -~acc.get(n)), new Map))
.reduce((acc, n) => (n[1] === repeated && acc.push(n[0]), acc), []);
function getRepetition(arr, repeated) {
const result = [];
const count = {};
for (const n of arr) {
if (!count.hasOwnProperty(n)) {
count[n] = 0;
}
count[n]++;
}
for (const n in count) {
if (count[n] === repeated) {
result.push(+n);
}
}
return result;
}