Untitled

document.addEventListener('DOMContentLoaded', function () {

    // calls function growing when you hover over a rectangle
    // calls function shrinking when you leave the area of the rectangle 
    document.querySelectorAll(".rectangle").forEach((rectangle) => {
        rectangle.addEventListener("mouseover", growing);
        rectangle.addEventListener("mouseout", shrinking);
    });

    // adds the class grow on the targeted rectangle 
    function growing(event) {
        event.target.classList.add("grow");
    }

    // removes class grow when you leave the area of a rectangle
    function shrinking(event) {
        event.target.classList.remove("grow");

    }

});