👩‍💻 Напоминалка по HTML-элементам div и span!

Например, <div> используется для группировки блоков и применения стилей к целым секциям, а <span> — для выделения и стилизации отдельных частей текста внутри строки.

На картинке — сравнение блокового <div> со строчным <span>, с примерами кода и наглядным результатом.

Сохрани, чтобы не забыть!

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

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

Псевдокласс :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 | #практика