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

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

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

Мини-интерпретатор выражений на JavaScript!

Создаём калькулятор, который выполняет введённые выражения прямо в браузере — пример динамического исполнения кода через new Function().

Создаём функцию из строки:

const add = new Function('a', 'b', 'return a + b');
console.log(add(2, 3)); // 5

Пользователь вводит выражение — программа вычисляет результат:

const expr = prompt("Введите выражение:");
const calc = new Function(`return ${expr}`);
alert(calc());

Добавляем обработку ошибок для устойчивости:

try {
  const expr = prompt("Введите выражение:");
  const calc = new Function(`return ${expr}`);
  alert(calc());
} catch {
  alert("Ошибка в выражении!");
}

Немного безопасности — разрешаем только числа и операторы:

const expr = prompt("Введите выражение:");
if (/^[\d+\-*/().\s]+$/.test(expr)) {
  alert(new Function(`return ${expr}`)());
} else {
  alert("Недопустимые символы!");
}

🔥 Получаем мини-интерпретатор выражений прямо в браузере — удобно для калькуляторов и формул.

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

Проверяем, есть ли подключение к интернету!

Web API позволяет узнать, доступна ли сеть, а события online и offline — реагировать на потерю соединения. Это пригодится для офлайн-режима, сохранения черновиков или уведомлений.

Проверим текущее состояние:

console.log("Онлайн:", navigator.onLine);
// → true или false

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

window.addEventListener("online",  () => console.log("✅ Интернет восстановлен"));
window.addEventListener("offline", () => console.log("❌ Соединение потеряно"));

Теперь оформим динамический индикатор:

function updateStatus() {
  document.body.textContent = navigator.onLine 
    ? "🟢 Онлайн" 
    : "🔴 Оффлайн";
}
window.addEventListener("online", updateStatus);
window.addEventListener("offline", updateStatus);
updateStatus();

🔥 Интерфейс может мгновенно реагировать на пропадание сети — показывать баннер, отключать кнопки или сохранять действия в очередь.

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

👩‍💻 Вы знали, что проверять и отлаживать регулярки можно прямо в VS Code?

Regex Previewer — плагин, который тестирует регулярные выражения в реальном времени на образце текста, который совпадает с вашим выделенным текстом. Расширение включает подробную справку по синтаксису и готовые шаблоны, которые можно сразу использовать в коде.

📣 JS Ready | #vscode