#Фича

Как Вы думаете, что вернет функция?

Ответ 👇

В данном случае ответ будет 2000

Символ нижнего подчеркивания "_" может использоваться в числах для улучшения их читаемости.

Например, в числе 1_000 нижнее подчеркивание помогает разделить разряды и сделать число более читаемым. Это особенно полезно когда работа идет с большими числами

При выполнении кода, нижние подчеркивания игнорируются и число рассматривается как обычное целое число.

@CCODE | JS ⚡️

#Практика

Делаем простой таймер на javascript

JS:

const start = document.querySelector('.start');
const stop = document.querySelector('.stop');
const reset = document.querySelector('.reset');

start.addEventListener('click', startTimer);
stop.addEventListener('click', stopTimer);
reset.addEventListener('click', resetTimer);

let timer;
let time = 0;
let running = false;

function startTimer() {
 if (!running) {
  running = true;
  timer = setInterval(updateTimer, 1000);
 }
}

function stopTimer() {
 running = false;
 clearInterval(timer);
}

function resetTimer() {
 stopTimer();
 time = 0;
 updateDisplay();
}

function updateTimer() {
 time++;
 updateDisplay();
}

function updateDisplay() {
 let sec = time % 60;
 let min = Math.floor((time / 60) % 60);
 let hours = Math.floor(time / 3600);
 const intervalEl = document.querySelectorAll('.interval');

 intervalEl[0].textContent = hours < 10 ? '0' + hours : hours;
 intervalEl[1].textContent = min < 10 ? '0' + min : min;
 intervalEl[2].textContent = sec < 10 ? '0' + sec : sec;
}

@CCODE | JS ⚡️

Анимация высоты с помощью grid-template-rows, для плавного показа контента внутри аккордиона

HTML:

 <div class="accardion-panel">
      <div class="accardion-header">
        <div class="accardion-title">Lorem ru ipsum?</div>
      </div>
      <div class="accardion-bottom">
        <div class="accardion-content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae neque aspernatur impedit voluptates et cumque eligendi aperiam sit, culpa, laudantium id ea nam amet molestias nihil ipsum cupiditate est fugit?
        </div>
      </div>
    </div>

CSS:

.accardion-bottom {
 display: grid;
 grid-template-rows: 0fr;
 transition: 0.3s ease;
}

.accardion-content {
 overflow: hidden;
 font-size: 14px;
 line-height: 150%;
}

.accardion-bottom-active {
 grid-template-rows: 1fr;
}

JS:

document.querySelectorAll('.accardion-header').forEach((item) => {
 item.addEventListener('click', (e) => {
  let item = e.target.closest('.accardion-panel');
  let content = item.querySelector('.accardion-bottom');
  content.classList.toggle('accardion-bottom-active');
 });
});

@CCODE | CSS ⚡️

#Практика

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

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