// Create variables to represent the container div and the output text field
let container = document.querySelector("#container");
let output = document.querySelector("#output");

// Function that adds the "active" class to the container
function addActiveClass() {

    container.classList.add("active");

}

// Function that removes the "active" class from the container
function removeActiveClass() {

    container.classList.remove("active");

}

// Function that sets the text of the output field to a sentence including the mouse x (clientX) and y (clientY) positions
function trackXandY(event) {

    output.innerHTML = "Your mouse position: " + "X: " + event.clientX + ", Y: " + event.clientY;

}

// Add event listener to container for mouseover event that calls addActiveClass
container.addEventListener("mouseover", addActiveClass);
// Add event listener to container for mouseout event that calls removeActiveClass
container.addEventListener("mouseout", removeActiveClass);
// Add event listener to container for mousemove event that calls trackXandY
container.addEventListener("mousemove", trackXandY);