const changeColorRules = [
['синий', 'красный'],
['зеленый', 'желтый'],
['белый', 'черный'],
];
function changeWords(node, rules) {
node.textContent = rules
.reduce((str, rule) => str.replace(new RegExp(rule[0], 'gi'),
(match) => (match[0] === rule[0][0].toUpperCase()) ? rule[1][0].toUpperCase() + rule[1].slice(1) : rule[1]),
node.textContent);
}
const demoParagraph = document.querySelector('#demo');
changeWords(demoParagraph, changeColorRules);src у button нужно переименовать в data-src, чтобы получать его через dataset.document.addEventListener('click', switchColorButtonHandler);
function switchColorButtonHandler({ target }) {
const clickedButton = target.closest('.slide-product__options');
if (!clickedButton) return;
const productWrapper = clickedButton.closest('.slide-product__image');
const productImage = productWrapper.querySelector('.picture img');
productWrapper.querySelectorAll('button').forEach(button => {
button.classList.remove('_active');
});
clickedButton.classList.add('_active');
productImage.src = clickedButton.dataset.src;
}/^\d{1,12}$/
const input = document.querySelector('.word');
const divider = '-';
const secondDivider = '_';
const dividerRules = [
{ pattern: `[a-z0-9_-]`, replacement: divider },
{ pattern: `[\\${divider}\\${secondDivider}]+`, replacement: (match) => match[0] },
{ pattern: `^[\\${divider}\\${secondDivider}]+|[\\${divider}\\${secondDivider}]+$`, replacement: '' },
]
const valueReplacer = (input, rules) => {
rules.forEach(({ pattern, replacement }) => input.value = input.value.replace(new RegExp(pattern, 'gi'), replacement));
}
input.addEventListener('change', ({ target }) => {
valueReplacer(target, dividerRules);
});const charDict = {
a: ['∀', '₳', 'Ä'],
b: ['Ᏸ', 'β', '฿', 'ß'],
c: ['ℭ', 'Ç', 'Ꮸ', '₡'],
d: ['Ɗ', 'Ď', 'Đ'],
e: ['£', 'Ē', 'ξ', 'Ê', 'È', '€', 'É', '∑', 'Ế', 'Ề', 'Ể', 'Ễ'],
f: ['ℱ', '₣', 'ƒ', '∮', 'Ḟ', 'ჶ'],
g: ['Ꮹ', 'Ꮆ', 'Ǥ', '₲'],
h: ['ℍ', 'ℋ', 'ℌ', 'ዙ', 'Ĥ', 'Ħ'],
i: ['ℐ', 'ℑ', 'Ï'],
j: ['ჟ', 'Ĵ'],
k: ['₭', 'Ꮶ', 'Ќ', 'Ķ', 'Ҝ', 'ﻸ'],
l: ['ℒ', 'ℓ', 'Ŀ', '£', 'λ', '₤', 'Ł', 'Ꮭ', '￡', 'Ꮑ'],
m: ['ℳ', 'ʍ', 'Ḿ', '爪'],
n: ['ℕ', 'η', 'Ñ', 'Ŋ', 'Ń', 'ℵ', '₦'],
o: ['ტ', 'Ǿ', 'Θ', 'Ø', 'Ό', 'Ở', 'Ờ', 'Ớ', 'Ổ'],
p: ['ℙ', '℘', 'þ', '尸', 'Ҏ', '₱'],
q: ['ℚ', 'Q', 'Q'],
r: ['ℝ', 'ℜ', 'ℛ', '℟', 'ჩ', 'Ꮢ', '尺'],
s: ['Ꮥ', 'Ṧ', 'ى', '§', 'Ś', 'Ŝ', '₰', '∫', '$', 'ֆ'],
t: ['₸', '†', 'T', 'Ţ', 'Ŧ', 'ィ', '干', 'Ṫ', 'テ', '₮'],
u: ['∪', 'Ũ', '⋒', 'Ủ', 'Ừ', 'Ử', 'Ữ', 'Ự', 'Џ'],
v: ['∨', '√', 'Ꮙ', 'Ṽ', '/', '℣'],
w: ['₩', 'Ẃ', 'Ẁ', 'ώ', 'ω', 'Ŵ', 'Ꮤ', 'Ꮃ', 'ฬ', 'Ẅ', 'ѡ', 'Ꮚ', 'Ꮗ', 'ผ', 'ฝ', 'พ', 'ฟ'],
x: ['χ', 'ჯ', 'Ẍ', 'ẍ', 'ᶍ'],
y: ['ɣ', 'Ꭹ', 'Ꮍ', 'Ẏ', 'ẏ', 'ϒ', 'ɤ', '￥', 'り'],
z: ['ℤ', 'ℨ', 'ჳ', '乙', 'Ẑ', 'ẑ', 'ɀ', 'Ꮓ']
}function replaceChars(str) {
return str.split('').map(char => {
char = char.toLowerCase();
return (char in charDict) ? charDict[char][Math.floor(Math.random() * charDict[char].length)] : char;
}).join('');
}function plural(n, titles) {
return `${n} ` + titles[n % 10 == 1 && n % 100 != 11 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2];
}
function updateSummary(completionTimeHours) {
document.getElementById('completion-time').textContent =
completionTimeHours <= 0
? 'Invalid'
: completionTimeHours <= 24
? `${plural(completionTimeHours, ['час', 'часа', 'часов'])}`
: `${plural(Math.ceil(completionTimeHours / 24), ['день', 'дня', 'дней'])}`;
}function setTotalSum() {
const totalSum = Array.from(document.querySelectorAll('.right-form-calculator__cost'), e => +e.textContent)
.reduce((summ, cost) => summ + cost, 0);
document.querySelector('.right-form-calculator__sum').textContent = `Сумма ${totalSum} руб`;
}updateActiveMenuItems.
.reduceRight( (f, g) => (() => g(f(...args)))()).reduceRight( (f, g) => (...args) => g(f(...args)))submitBtn.addEventListener('click', () => {
filterAddBox.innerHTML = '';
checkboxButtons.forEach(checkbox => {
if (!checkbox.checked) return;
const checkboxText = checkbox.nextElementSibling.nextElementSibling.innerText;
const addFilterHTML = document.createElement('div');
addFilterHTML.classList.add('filter__add');
addFilterHTML.textContent = checkboxText;
filterAddBox.appendChild(addFilterHTML);
})
})entry.forEach((change) => {
change.target.classList.toggle('scroll-on', change.isIntersecting);
change.target.classList.toggle('second-classname', change.isIntersecting);
})function getKeyByValue(object, value) {Эта функция нигде не используется (консольлог не в счёт). Ну и функции нежелательно объявлять внутри условных конструкций.
res = Object.values(result).filter((item)=>item%2 !==0);А здесь пропало ключевое слово объявления переменной. И res тоже не используется.
childArr.map(item => { // перебираю все карточки в корзинев первом селекте 1 авто а во втором 2В этому случае «перебираются» 2 элемента через этот .map().
но после повторного добавления авто в корзину возвращаются удаленные карточки
let getCars = JSON.parse(localStorage.getItem(LSKeyCars) || "[]");const CARS_LIMIT = 2;
const optionsBlock = document.querySelector('.parent');
const cart = document.querySelector('.info');
const addOptionButton = document.querySelector('.add');
const addToCartButton = document.querySelector('.btn');
const clearCartButton = document.querySelector('.delete-all');
addOptionButton.addEventListener('click', addOption);
addToCartButton.addEventListener('click', addItemToCart);
clearCartButton.addEventListener('click', clearCart);
optionsBlock.addEventListener('click', ({ target }) => {
if (target.closest('.remove')) {
target.parentNode.remove();
}
});
function addOption() {
optionsBlock.insertAdjacentHTML('beforeend',
`<div class="child">
<span class="remove">✖</span>
<input type="text" class="model" placeholder="Введите модель авто">
<select class="amount">
<option value="" disabled selected>Количество</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>`)
}
function clearCart() {
localStorage.removeItem('cars');
renderCart();
}
function addItemToCart() {
const currentCarsState = getStorageState() ?? [];
const carInfoOptions = [...document.querySelectorAll('.child')];
const carsAmount = currentCarsState.reduce((acc, { carAmount }) => acc + carAmount, 0);
const { carsData, selectedAmount } = carInfoOptions.reduce((acc, carInfo) => {
const carAmount = +carInfo.querySelector('.amount').value;
const carModel = carInfo.querySelector('.model').value;
const currentCarData = {
id: Math.floor(Math.random() * 100), //плохой вариант, т.к. случайные числа могут повторяться
carModel,
carAmount,
};
acc.carsData.push(currentCarData);
acc.selectedAmount += carAmount;
return acc;
}, { carsData: [], selectedAmount: 0 })
if (carsAmount + selectedAmount > CARS_LIMIT) {
alert('Количество автомобилей превышает количество взрослых');
return;
}
localStorage.setItem('cars', JSON.stringify([...currentCarsState, ...carsData]));
renderCart();
}
function getStorageState() {
return JSON.parse(localStorage.getItem('cars'));
}
function renderCart() {
const cartData = getStorageState();
cart.innerHTML = !cartData ? '' : cartData.map(car => `<div class="item" id="${car.id}">
<div class="title">ЛИЧНЫЙ ТРАНСПОРТ</div>
<div>Модель авто: ${car.carModel}</div>
<div>Количество авто: ${car.carAmount}</div>
</div>`).join('');
}const accordionButtons = document.querySelectorAll('.accordion');
accordionButtons.forEach(button => {
button.addEventListener('click', switchAccordion);
});
function switchAccordion({target}) {
target.classList.toggle('active');
const panel = target.nextElementSibling;
panel.style.maxHeight = (panel.style.maxHeight) ? null : panel.scrollHeight + 'px';
}
switchAccordion({target: accordionButtons[0]});if (i === 0) {
acc[i].click();
}const monthData = allData.reduce((acc, { day, speed, distance, wagons }) => {
const yearMonth = day.match(/\d{4}-\d{2}(?=-\d{2})/)[0];
if (acc[yearMonth]) {
acc[yearMonth].speed += speed;
acc[yearMonth].distance += distance;
acc[yearMonth].wagons += wagons;
} else {
acc[yearMonth] = { speed, distance, wagons };
}
return acc;
}, {})if (item < 0) return;
const response = await fetch(url, options);
const result = await response.json();
if (result.result === 0) return;
currentItem.push(info);
render([info]);
update();const parentBlock = document.querySelector('.parent-block');
parentBlock.addEventListener('click', ({target}) => {
if (!target.classList.contains('btn')) return;
const allPageSelects = document.querySelectorAll('select');
allPageSelects.forEach(select => {
console.log(select.options[select.selectedIndex].textContent);
});
})