#Практика

Создаем простую галерею на javascript

Код в комментариях 👇

@CCODE | JS ⚡️

Правило @supports в CSS - это условное групповое правило, которое позволяет применять блок стилей только в том случае, если определенное условие истинно.

Оно проверяет, поддерживает ли браузер определенное свойство CSS , прежде чем применять стили внутри блока.

В нашем случае стили внутри блока @supports будут применены только в том случае, если браузер поддерживает свойство display: grid . Если условие не выполняется, стили внутри блока будут проигнорированы.

@CCODE | CSS ⚡️

#Практика

Пишем логику для игры "Крестики-Нолики"

Забрать код 👇

@CCODE | JS ⚡️

#Задача

Напишите функцию isUnique(str), которая принимает строку и возвращает true, если все символы в строке являются уникальными (не повторяются), и false в противном случае. При проверке на уникальность не учитывайте пробелы.

Ответ👆
Объяснение👇

1. Создается объект charMap для хранения уникальных символов.

2. Проходим по каждому символу в строке str с помощью цикла for...of

3. Для каждого символа проверяем, есть ли он уже в объекте charMap. Если есть, то символ повторяется, и функция возвращает false.

4. Если символ не найден в объекте charMap, добавляем его в объект с использованием символа в качестве ключа и true в качестве значения.

5. После прохода по всем символам строки, если все символы уникальны, объект charMap будет содержать только уникальные символы, и функция возвращает true.

@CCODE | JS ⚡️

Свойство counter-increment в CSS

Используется для увеличения значения счетчика при отображении элементов списка или других элементов счетчика

.todo-list {
 counter-reset: counter;
}
.todo-item:before {
 counter-increment: counter;
 content: counter(counter);
}

@CCODE | CSS ⚡️

#Практика

Пишем логику для работы аккордеона

Забрать код 👇

@CCODE | JS ⚡️

#Практика

Делаем MinMax Range Slider

Забрать код 👇

@CCODE | JS ⚡️

Адаптивная сетка в несколько строчек кода с помощью grid

CSS:

.wrapper {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 20px;
}

HTML:

 <div class="wrapper">
   <div class="box">1</div>
   <div class="box">2</div>
   <div class="box">3</div>
   <div class="box">4</div>
  </div>

@CCODE | CSS ⚡️

#Задача

Напишите функцию, которая принимает две строки и возвращает true, если строки являются анаграммами (содержат одни и те же символы в разном порядке), и false в противном случае. При проверке анаграммы регистр символов не учитывается, а также игнорируются пробелы.

Ответ 👆
Объяснение👇

1. Приводим строки к нижнему регистру с помощью метода toLoweCase()
2. Удаляем проблемы из строк с помощью replace(/\s/g, '')
3. После этого мы преобразуем строки в массив символов с помощью split('').
4. Делаем сортировку массива с символами и объединяем обратно с помощью метода join('');

Затем мы сравниваем отсортированные строки и возвращаем true, если они равны, и false в противном случае.

@CCODE | JS ⚡️

#Практика

Создаем простое приложение для поиска информации на 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 ⚡️

Псевдокласс :user-invalid

Позволяет сделать удобную стилизацию валидации нативными средствами CSS

@CCODE | CSS ⚡️

Псевдокласс is() в CSS

Позволяет вам группировать несколько селектор в один, что упрощает написание CSS стилей

.cart__number:is(:hover, :focus) {
 outline: 1px solid var(--accent);
 color: var(--accent);
}

Поддержка браузерами на данный момент составляет 97.68%

@CCODE | CSS ⚡️

#Задача

Напишите функцию которая принимает целое число и преобразует его в римское число

Ответ 👆
Объяснение 👇

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 ⚡️

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

@CCODE | VSCODE⚡️

Каррирование в 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 ⚡️

🎯 Задача

Напишите функцию, которая принимает массив товаров и возвращает объект, где ключами являются категории товаров, а значениями - массивы товаров, относящихся к соответствующей категории.

Решение смотри 👆

@CCODE | JS ⚡️

#Задача

Дан массив строк, где каждая строка содержит слово. Написать функцию, которая сгруппирует анаграммы вместе. Анаграммами считаются слова, составленные из одного и того же количества одинаковых букв, но, возможно, в разном порядке. Функция должна вернуть массив групп анаграмм, где каждая группа представляет собой массив слов. Порядок групп и слов внутри группы не важен.

Пример:

Входные данные: ["ток", "окт", "свет", "тест", "твес", "кот"]

Выходные данные: [["ток", "окт", "кот"], ["свет", "твес"], ["тест"]]

Решение 👆
Объяснение 👇

1. Создаем пустой объект groups, где каждый ключ - это отсортированная строка символов слова, а значение - массив слов-анаграмм этого ключа.
2. Перебираем все слова во входном массиве. Для каждого слова:
- Разделяем слово на буквы с помощью split(''),
- Сортируем полученный массив букв,
- Объединяем отсортированный массив букв обратно в строку с помощью join(''). Эта строка служит ключом.
3. Проверяем, существует ли уже такой ключ в объекте groups. Если нет, создаем пустой массив по этому ключу.
4. Добавляем текущее слово в массив по ключу анаграммы.
5. В конце функции возвращаем массив, сгруппированный с помощью Object.values(groups), который содержит все значения объекта groups, то есть наши группы анаграмм.

@CCODE | JS ⚡️