const target = document.getElementById("xy-target");
const pad = document.getElementById("xy-pad");

let rect = pad.getBoundingClientRect();
let width = pad.clientWidth;
let height = pad.clientHeight;

let control = false;

pad.addEventListener("mouseenter", () => {
	control = true;
});

pad.addEventListener("mouseleave", () => {
	control = false;
});

pad.addEventListener("mousemove", (e) => {
	if (control) {
		var x = e.clientX - rect.left; //x position within the element.
		var y = e.clientY - rect.top; //y position within the element.
		target.style.backgroundColor = `hsl(${(x / width) * 360}deg, 100%, 75% )`;
		target.style.transform = `scale(${100 + (y / height) * 100}%)`;
	}
});