#Практика

Создаем свое мини приложение по подсчету: слов, букв и спец символов

JS:

const words = document.querySelector('.words-count');
const symbols = document.querySelector('.symbols-count');
const chars = document.querySelector('.count-chars');
const textArea = document.querySelector('.text');

textArea.addEventListener('input', (e) => {
 words.textContent = textArea.value.trim().split(/\s+/).length;

 if (textArea.value.trim() === '') words.textContent = '0';

 chars.textContent = textArea.value
  .split(/[ !"№;%:@#?*()_+\/,.]/)
  .join('').length;

 symbols.textContent = textArea.value.split(/[!@#$%^&*()_+.,-/]/).length - 1;
});

@CCODE | CSS ⚡️

#Задача

Напишите функцию, которая принимает предложение и возвращает самое длинное слово в этом предложение.

Если в предложение несколько слов с одинаковой длиной, верните первое из них

input: 'I love ? javascript!'
output: javascript

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

1. Принимаем аргументом предложение (sentence)
2. Разделяем предложение на массив слов с помощью метода split(' ')
3. Заводим 2 переменные, которые будут хранить самое длинное слово и его длину
4. В цикле for проходим по каждому слову и с помощью регулярного выражения удаляем все символы кроме букв , а так же определяем длину слова в переменную wordLength
5. Делаем проверку. Если текущее слово длинее, чем сохраненное слово, обновляем значение переменных (longWord и MaxLength)
6. Возвращаем переменную longWord

@CCODE | JS ⚡️

#Практика

Пишем скрипт для отправки данных из формы в телеграмм

JS:

const form = document.querySelector('#myForm');

form.addEventListener('submit', formSend);

async function formSend(event) {
 event.preventDefault();

 const nameForm = this.querySelector('#name').value;
 const phoneForm = this.querySelector('#phone').value;

 const TOKEN = '';
 const chatID = '';
 const URI_API = `https://api.telegram.org/bot${TOKEN}/sendMessage`;

 let msg = `
    Новая завка!
    Имя клиента: ${nameForm};
    Телефон клиента: ${phoneForm};
  `;
 const response = await fetch(URI_API, {
  method: 'POST',
  headers: {
   'Content-type': 'application/json',
  },
  body: JSON.stringify({
   chat_id: chatID,
   text: msg,
  }),
 });
 const result = await response.json();

 if (result.ok) {
  alert('Форма отправлена');
 } else {
  alert('Ошибка');
 }
}

@CCODE | JS ⚡️

#плюшки 😁

Если вы хотите немного украсить ваш javascript код, а темы которые есть надоели, сделайте следующее:

Параметры -> editor.tokenColorCastomizations

"comments": "#ваш цвет" - цвет комментариев
"strings": "#ваш цвет" - цвет строк
"numbers": "#ваш цвет" - цвет чисел
"functions": "#ваш цвет" - цвет функций
"variables": "#ваш цвет" - цвет переменных

@CCODE | ⚡️

Опциональная цепочка (Optional chaining) в JavaScript - это способ безопасного доступа к свойствам объекта, когда некоторые из них могут быть null или undefined.

Опциональная цепочка позволяет избежать ошибок типа "Cannot read property 'x' of undefined" или "Cannot read property 'x' of null".

В нашем примере, используя опциональную цепочку ?. , мы добавляем обработчик события click к button, что позволяет нам избежать ошибки если элемент с классом button не был найден

@CCODE | JS ⚡️

#Практика

Создаем простую галерею на 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 ⚡️