Untitled

document.addEventListener('DOMContentLoaded', function () {
   
    const buttons = document.querySelectorAll('.button');
    const boxes = document.querySelectorAll('.box');
    const rows = document.querySelectorAll('.row');

    buttons.forEach((button, index) => {
        button.addEventListener('click', function () {
            
            //Check if the button is already active
            const isActive = this.classList.contains('activeBorderColor');

            //Reset all buttons and boxes to their initial state, with animation
            buttons.forEach(button => button.classList.remove('activeBorderColor'));
            boxes.forEach(box => {
                box.style.transition = 'width 1s, height 1s';
                box.style.width = '';
                box.style.height = '';
            });

            if (!isActive) {
                
                //Activate animation and color for the selected button
                this.classList.add('activeBorderColor');

                //Using index to find the corresponding row and box, since they belong to the same row
                const targetRow = rows[index];
                const targetBox = targetRow.querySelector('.box');

                //Activate animation for the box corresponding to the button you pressed
                targetBox.style.width = '12vmin';
                targetBox.style.height = '12vmin';
            }
        });
    });
});