Untitled

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

    // Creates list for all the items
    let boxes = document.querySelectorAll(".box");
    let buttons = document.querySelectorAll(".button")

    //Listenter to see if the buttons are clicked and calls function active
    buttons.forEach((button, index) => {
        button.addEventListener("click", active);
    });


    function active(event) {
        //removes class active to reset space
        for (let button of buttons) {
            button.classList.remove("active")
        };
        //Adds class active to the pressed button
        event.target.classList.toggle('active')

        //variable for which index the box we want to change is at in list boxes
        let indexToFind = event.target.value - 1;
        for (let i = 0; i < boxes.length; i++) {
            //removes class grow from all boxes
            boxes[i].classList.remove("grow");

            //checks if current index of boxes is the same as the button pressed and then calls to grow
            if (i === indexToFind) {
                boxes[i].classList.add("grow");
            }
        }

    }