👩‍💻 Можно ли подсветить элемент, когда он получает внимание пользователя?

Псевдокласс :focus срабатывает, когда элемент находится в фокусе — например, после клика мышкой или перехода через клавишу Tab.

Примеры использования:

• outline — рисуем рамку вокруг поля ввода;

• background — меняем фон кнопки при фокусе;

• box-shadow — добавляем мягкое свечение;

• transform — можно слегка «увеличить» элемент.

Важно знать, что в стандартных стилях браузера уже прописаны дефолтные стили для фокуса интерактивных элементов.

📣 Code Ready | #свойство

Конвертируем фунты в килограммы и обратно!

Нередко требуется перевести значение между разными единицами массы. Реализуем небольшой конвертер для фунтов (lb) и килограммов (kg) на чистом JS.

Задаём коэффициент:

const KG_PER_LB = 0.45359237;

Пишем функцию:

function convert(value, direction) {
  return direction === 'lb→kg'
    ? +(value * KG_PER_LB).toFixed(2)
    : +(value / KG_PER_LB).toFixed(2);
}

Проверяем работу:

console.log(`50 lb = ${convert(50, 'lb→kg')} кг`);
console.log(`100 кг = ${convert(100, 'kg→lb')} lb`);

Результат:

50 lb = 22.68 кг
100 кг = 220.46 lb

🔥 Такой сниппет можно встроить в калькулятор веса или форму на сайте.

📣 Code Ready | #практика

😎 CSS Diner — игра, которая учит CSS-селекторы!

Хочешь наконец разобраться в селекторах, комбинаторах и псевдоклассах без скучной теории и документации? CSS Diner - идеальный способ: уровни начинаются с простых селекторов, а дальше всё усложняется, придётся реально думать.

📌 Делюсь ссылочкой: flukeout.github.io

📣 Code Ready | #ресурсы

👩‍💻 Помечаем поля формы, которые доступны только для чтения!

Атрибут readonly делает поля формы доступными только для чтения. Пользователь не сможет изменить значение такого поля, но сможет выделить и скопировать текст.

Например:

• Отображение данных из профиля, которые нельзя изменить;

• Показ результатов расчётов;

• Демонстрация значений по умолчанию.

Не путайте readonly с disabled. Неактивные поля не получают фокус и не отправляются с формой, а поля только для чтения (readonly) - получают и отправляются.

📣 Code Ready | #атрибут

Современное копирование текста через Clipboard API!

Почти каждое веб-приложение сегодня требует возможности быстро скопировать данные: ссылку, токен, код. Для этой задачи используется navigator.clipboard.

Начнём с базовой команды на копирование:

const value = "https://example.com?ref=JS";
navigator.clipboard.writeText(value);

Этот метод возвращает промис, поэтому стоит обернуть его в аккуратную обёртку с обработкой результата:

navigator.clipboard.writeText(value)
  .then(() => console.log("✅ Скопировано"))
  .catch(err => console.error("❌ Ошибка:", err));

Создадим функцию copyToClipboard, которую можно переиспользовать в любом месте приложения:

function copyToClipboard(text) {
  return navigator.clipboard.writeText(text);
}

И используем её в нужный момент (например, по клику или по горячей клавише):

copyToClipboard("PROMO2025").then(() =>
  console.log("Промокод отправлен в буфер 🎯")
);

🔥 Всё лаконично и нативно. Главное, что это работает во всех современных браузерах.

📣 Code Ready | #практика