Code Ready | Frontend

✅ Как создать пипетку в пару строк кода?



API EyeDropper предоставляет механизм для создания инструмента "Пипетка". С помощью этого инструмента пользователи могут брать образцы цветов со своих экранов, в том числе за пределами окна браузера.



*Экспериментальная технология, на данный момент поддержка составляет 31.83%

<img src="https://kinderbooks.ru/img/klassnye-kartinki-iz-multikov_69.jpg" alt="img">

  <div class="result">@code_ready</div>

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

* {text-align: center; font-weight: 600;}

const button = document.querySelector('.btn');

const result = document.querySelector('.result');



const colorPicker = async () => {

  const eyeDropper = new EyeDropper();

  const {sRGBHex} = await eyeDropper.open();

  result.innerHTML = sRGBHex;

}

button.addEventListener('click', colorPicker);

@code_ready | #обучение #css #js