Mouse Events

const clearBtn = document.querySelector('.clear-tasks');
const card = document.querySelector('.card');
const heading = document.querySelector('h5');

// Click
clearBtn.addEventListener('click', runEvent);

// Doubleclick
clearBtn.addEventListener('dblclick', runEvent);

// MouseDown - Click and hold
clearBtn.addEventListener('mousedown', runEvent);

// MouseUp - When mouse button released
clearBtn.addEventListener('mouseup', runEvent);

// MouseEnter
card.addEventListener('mouseenter', runEvent);

// MouseLeave - Hover
card.addEventListener('mouseleave', runEvent);

// MouseOver - Hover
card.addEventListener('mouseover', runEvent);

// MouseOut - Hover
card.addEventListener('mouseout', runEvent);

//MouseMove
card.addEventListener('mousemove', runEvent);

//Event Handler
function runEvent(e) {
  console.log(`EVENT TYPE: ${e.type}`);

  heading.textContent = `MouseX: ${e.offsetX} MouseY: ${e.offsetY} `;

  document.body.style.background = `rgb(${e.offsetX}, ${e.offsetX}, 40)`;
}