Нативный выбор цвета через браузерный API

Хотите встроить в проект пипетку как в Photoshop — без лишних библиотек? В Chrome, Edge и Opera уже есть нативный EyeDropper API. Работает по HTTPS и в последних версиях Chromium-браузеров.

Шаг 1 — добавляем кнопку:

<button id="pickColor">Выбрать цвет</button>

Шаг 2 — подключаем EyeDropper:

if (!window.EyeDropper) {
  alert("Ваш браузер не поддерживает EyeDropper API");
}

Шаг 3 — открываем пипетку и используем цвет:

const btn = document.getElementById("pickColor");
btn.addEventListener("click", async () => {
  const eyeDropper = new EyeDropper();
  const { sRGBHex } = await eyeDropper.open();
  console.log("Цвет:", sRGBHex);
  document.body.style.backgroundColor = sRGBHex;
});

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

🔥 Отличный инструмент для кастомизации, темизации и цветовых палитр прямо в браузере.

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

Проверяем заряд батареи устройства!

Нативный браузерный API позволяет узнать уровень заряда, время работы и подключение к сети — без плагинов и библиотек. Но Battery Status API поддерживается не во всех браузерах.

Получим информацию о батарее:

navigator.getBattery().then(battery => {
  console.log("Заряд:", battery.level * 100 + "%");
  console.log("Подключено к сети:", battery.charging);
});

Теперь оформим вывод:

navigator.getBattery().then(battery => {
  const percent = Math.round(battery.level * 100);
  const status = battery.charging ? "🔌 Заряжается" : "🔋 Автономно";
  console.log(`${status} — ${percent}%`);
});

Добавим реакцию на изменение уровня заряда:

navigator.getBattery().then(battery => {
  battery.addEventListener("levelchange", () => {
    console.log("Обновлённый заряд:", battery.level * 100 + "%");
  });
});

🔥 Теперь можно адаптировать интерфейс под состояние батареи: отключать анимации при 10% или показывать предупреждение.

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

👩‍💻 Не хотите скучную декоративную линию между колонками?

Свойство column-rule-style отвечает за стиль линии между колонками в многоколоночной вёрстке.

Примеры значений:

• solid — сплошная линия;

• dashed — пунктирная линия;

• dotted — точки;

• double — двойная линия.

Обычно свойство используют вместе с column-rule-width и column-rule-color, чтобы полностью контролировать внешний вид разделителя.

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

👩‍💻 Ограничиваем загрузку файлов по типу!

Атрибут accept добавляется тегу <input>. Он позволяет указать, файлы какого типа пользователю нужно прикрепить.

Он может принимать следующие значения:

'audio/*' — звуковые файлы любого формата;
'video/*' — видео любого формата;
'image/*' — изображения любого формата;
'image/jpeg' — JPEG изображения;
'image/png' — PNG изображения;
'application/pdf' — PDF документы;
'audio/mpeg' — MP3 аудиофайлы;
'video/mp4' — MP4 видеофайлы.

Поэтому, accept принимает только корректные MIME-типы или расширения. Например, просто text без уточнения будет недействителен.

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

📱 JavaScript Array Methods — краткая шпаргалка!

На картинке собраны часто используемые методы массивов в JavaScript — от изменения и объединения данных до поиска и фильтрации элементов.

Примеры показывают, как работают методы: что возвращают, как изменяют массив и где применяются.

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

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