.ccode [JS, HTML, CSS]

Статический метод Object.groupBy() группирует элементы заданной итерации в соответствии со строковыми значениями, возвращаемыми предоставленной cb функцией. Возвращаемый объект имеет отдельные свойства для каждой группы и содержит массивы с элементами группы.Object.groupBy() - принимает первым аргументом массив по которому мы будем проходиться, а вторым аргументом cb функцию которая первым аргументом имеет элемент нашего массива, а так же индекс (необязательно)Логику данного метода мы также можем реализовать с помощью reduce const myGroup = Object.groupBy(array, ({ value }) => { return value;});@CCODE | JS ⚡️

Делаем плавную прокрутку к элементам с помощью метода scrollIntoViewJS:const links = document.querySelectorAll('.link');links.forEach((item) => { item.addEventListener('click', (e) => { e.preventDefault(); let id = item.getAttribute('href'); let formattierID = id.substring(1); let section = document.getElementById(formattierID); section.scrollIntoView({ behavior: 'smooth', }); });});@CCODE | JS ⚡️

Метод flatMap() - может значительно упростить работу с массивами массивов или операции, требующие сначала преобразовать каждый элемент массива, а затем сгладить результатДанный метод сначала применяет функцию к каждому элементу исходного массива, а затем применяет метод flat() к результату.Пример использования:Допустим, у вас есть массив чисел, и вы хотите заменить каждое число массивом его квадрата и куба. Вот как вы можете это сделать с использованием map() и flat() отдельно:let arr = [1, 2, 3, 4];let mappedAndFlattened = arr.map(x => [x * x, x * x * x]).flat();console.log(mappedAndFlattened); // [1, 1, 4, 8, 9, 27, 16, 64]Теперь, вот как можно упростить то же самое с помощью flatMap():let arr2 = [1, 2, 3, 4];let mappedAndFlattened2 = arr2.flatMap(x => [x * x, x * x * x]);console.log(mappedAndFlattened2); // [1, 1, 4, 8, 9, 27, 16, 64]В обоих примерах результат будет одинаковым, но использование flatMap() позволяет сделать код более компактнымЭтот метод может быть особенно полезен при работе с данными, где необходимо провести манипуляции с элементами массива и сразу упростить структуру данных, сокращая количество шагов и делая ваш код более читаемым@CCODE | JS ⚡️

Что будет выведено в консоль? 👇

#Задача Дан массив строк, где каждая строка содержит слово. Написать функцию, которая сгруппирует анаграммы вместе. Анаграммами считаются слова, составленные из одного и того же количества одинаковых букв, но, возможно, в разном порядке. Функция должна вернуть массив групп анаграмм, где каждая группа представляет собой массив слов. Порядок групп и слов внутри группы не важен.Пример:Входные данные: ["ток", "окт", "свет", "тест", "твес", "кот"]Выходные данные: [["ток", "окт", "кот"], ["свет", "твес"], ["тест"]]Решение 👆Объяснение 👇1. Создаем пустой объект groups, где каждый ключ - это отсортированная строка символов слова, а значение - массив слов-анаграмм этого ключа.2. Перебираем все слова во входном массиве. Для каждого слова: - Разделяем слово на буквы с помощью split(''), - Сортируем полученный массив букв, - Объединяем отсортированный массив букв обратно в строку с помощью join(''). Эта строка служит ключом.3. Проверяем, существует ли уже такой ключ в объекте groups. Если нет, создаем пустой массив по этому ключу.4. Добавляем текущее слово в массив по ключу анаграммы.5. В конце функции возвращаем массив, сгруппированный с помощью Object.values(groups), который содержит все значения объекта groups, то есть наши группы анаграмм.@CCODE | JS ⚡️

#ПрактикаПишем логику для фильтрации и поиска товаров на страницеЗабрать код 👇@CCODE | JS ⚡️

🎯 ЗадачаНапишите функцию, которая принимает массив товаров и возвращает объект, где ключами являются категории товаров, а значениями - массивы товаров, относящихся к соответствующей категории.Решение смотри 👆@CCODE | JS ⚡️

Каррирование в JavaScript — это преобразования функции, принимающей несколько аргументов, в последовательность функций, каждая из которых принимает один аргумент. Суть каррирования заключается в том, что когда функция принимает несколько аргументов, вы можете вызвать её, передав только часть аргументов. В ответ функция возвращает новую функцию, которая ожидает оставшиеся аргументы. Пример:function sum(a, b, c) { return a + b + c;}// Некаррированная функция, вызывается с тремя аргументами сразу:console.log(sum(1, 2, 3)); // Выведет 6// Каррированная версия той же функции:function currySum(a) { return function(b) { return function(c) { return a + b + c; }; };}// Каррированная функция вызывается с одним аргументом три раза:const curriedSum = currySum(1);const addTwo = curriedSum(2);const result = addTwo(3);console.log(result); // Выведет 6В примере выше, первая функция sum принимает все аргументы сразу.В тоже время Каррированная функция currySum, принимает первый аргумент и возвращает новую функцию, которая ожидает второй аргумент, и так далее.Мы так же можем реализовать Каррирование более элегантно с помощью рекурсии, позволяя каррировать функцию с любым количеством аргументов:function curry(func) { return function curried(...args) { if (args.length >= func.length) { return func.apply(this, args); } else { return function(...args2) { return curried.apply(this, args.concat(args2)); } } };}const curriedSum = curry(sum);console.log(curriedSum(1)(2)(3)); // Выведет 6Эта версия функции curry принимает исходную функцию sum и возвращает каррированную версию, которой можно передавать аргументы один за другим или группами, до тех пор пока не будет достаточно аргументов (в нашем случае их 3), чтобы вызвать исходную функцию. Когда все аргументы собраны, вызывается исходная функция sum с этими аргументами.@CCODE | JS ⚡️

vscodethemes - на этом сайте вы сможете найти подходящую тему для своего vscode 🫶@CCODE | VSCODE⚡️

#ЗадачаНапишите функцию которая принимает целое число и преобразует его в римское числоОтвет 👆Объяснение 👇1. Мы создаем объект intRomanMap, который служит словарем для соответствия между римскими и арабскими цифрами. Ключи объекта — это римские цифры, а значения — соответствующие им арабские числа.2. Следующий шаг — использование метода Object.entries(intRomanMap).reduce(...). Метод Object.entries() преобразует объект intRomanMap в массив массивов, где каждый внутренний массив содержит два элемента: ключ (римскую цифру) и значение (соответствующее ей число). Например, элемент ['M', 1000].3. Метод reduce() вызывается на этом массиве и используется для аккумуляции строки, представляющей римское число, то есть romanNumber. Этот метод принимает два аргумента: начальное значение аккумулятора (в данном случае пустую строку '') и функцию, которая выполнится для каждого элемента массива. Функция обратного вызова принимает два параметра: acc, аккумулятор, который в начале является пустой строкой, и текущий элемент массива [char, val], где char это ключ (римская цифра), а val — значение (число).4. В теле функции обратного вызова мы используем char.repeat(Math.floor(number / val)) для добавления римской цифры к строке аккумулятора. Math.floor(number / val) вычисляет, сколько раз текущее римское число помещается в оставшуюся часть числа number. Метод repeat повторяет римскую цифру соответствующее количество раз.5. Затем мы обновляем значение number, применяя остаток от деления number % val. Это оставляет часть number, которая еще не была преобразована в римскую цифру.6. После выполнения всех итераций reduce, возвращается итоговая строка romanNumber, которая является римским представлением изначального числа number.7. Функция intToRoman возвращает romanNumber, законченную строку с римским представлением числа.@CCODE | JS ⚡️

Псевдокласс is() в CSSПозволяет вам группировать несколько селектор в один, что упрощает написание CSS стилей.cart__number:is(:hover, :focus) { outline: 1px solid var(--accent); color: var(--accent);}Поддержка браузерами на данный момент составляет 97.68%@CCODE | CSS ⚡️

CSS свойство field-sizingПозволяет манипулировать поведением полей формы при заполненииПри значение field-sizing: content; - отключит стандартное поведение и позволит подстраивать размер полей формы в зависимости от контента field-sizing: fixed; сохранит текущее поведение, и поле ввода формы не будет изменяться в размерахПоддержка браузерами на данный момент составляет 46.45%@CCODE | CSS ⚡️

Псевдокласс :user-invalid Позволяет сделать удобную стилизацию валидации нативными средствами CSS@CCODE | CSS ⚡️

#ПрактикаСоздаем простое приложение для поиска информации на wikipedia JS:const form = document.querySelector('.form');const inputValue = document.querySelector('.input');const result = document.querySelector('.result');form.addEventListener('submit', (e) => { e.preventDefault(); if (inputValue.value.trim() !== '') { searchWiki(inputValue.value); }});function searchWiki(value) { const url = `https://ru.wikipedia.org/w/api.php?action=query&list=search&prop=info&inprop=url&utf8=&format=json&origin=*&srlimit=50&srsearch=${encodeURIComponent( value, )}`; fetch(url) .then((response) => response.json()) .then((data) => { displayResult(data.query.search); });}function displayResult(results) { result.innerHTML = `Кол-во найденных статей: ${results.length}`; const container = document.querySelector('.query-container'); container.innerHTML = ''; results.forEach((result) => { const element = document.createElement('div'); element.classList.add('result-item'); element.innerHTML = ` <div class="title-query">${result.title}</div> <div class="desc-query">${result.snippet}</div> <a class="item-link" href="https://ru.wikipedia.org/?curid=${result.pageid}" target="_blank">Читать больше</a> `; container.appendChild(element); }); inputValue.value = '';}@CCODE | JS ⚡️

#ЗадачаНапишите функцию, которая принимает две строки и возвращает true, если строки являются анаграммами (содержат одни и те же символы в разном порядке), и false в противном случае. При проверке анаграммы регистр символов не учитывается, а также игнорируются пробелы.Ответ 👆Объяснение👇1. Приводим строки к нижнему регистру с помощью метода toLoweCase()2. Удаляем проблемы из строк с помощью replace(/\s/g, '')3. После этого мы преобразуем строки в массив символов с помощью split('').4. Делаем сортировку массива с символами и объединяем обратно с помощью метода join('');Затем мы сравниваем отсортированные строки и возвращаем true, если они равны, и false в противном случае.@CCODE | JS ⚡️