Современное копирование текста через 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 | #практика

Нативный выбор цвета через браузерный 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 | #практика