Динамические темы [17/17] Испытание 100% (Короткий + Расширенный)

Курсы Динамические стили элементов
1

Интересно было повозиться и получить более практичный вариант:

  1. Окрашивание пикселя в выбранный цвет - ЛКМ;
  2. “Стирание” (окрашивание в белый) - ПКМ;
  3. Выбор цвета - скролл колесом мыши, при условии, что курсор внутри поля рисования.

Можно было б замутить кнопку “Очистить”, но разметка залочена.
Функционал по заданию сохранен (проверку проходит). Необязательное отмечено комментариями.

var canvas = document.querySelector('.canvas');
var palette = document.querySelector('.chosen-color');
var eraser = document.querySelector('#eraser-mode');

canvas.addEventListener('click', drawPixel);

// Очистка пикселя
canvas.addEventListener('contextmenu', clearPixel);

// Скролл цветового селектора
canvas.addEventListener('wheel', changeColor);

function drawPixel(e) {
  e.target.style.backgroundColor = (eraser.checked) ? 'white' : palette.value;
};

// ---------------- Очистка пикселя ----------------
function clearPixel(e) {
  e.preventDefault();
  e.target.style.backgroundColor = 'white';
};

// ---------------- Скролл цветового селектора ----------------
function changeColor(e) {
e.preventDefault();
  if (e.deltaY > 0) {
    palette.selectedIndex = (palette.selectedIndex !== palette.length - 1) ? ++palette.selectedIndex : 0;
  } else {
    palette.selectedIndex = (palette.selectedIndex !== 0) ? --palette.selectedIndex : palette.length - 1;
  };
};
1 лайк