str.length

Ошибки:
1) убрать стандартную отправку, поставив: e.preventDefault();
2) неправильные классы (указано: {firstNumder, secondNumder}, а в html: {firstNumber, secondNumber})
3) Переменная operation в которой указан value математической операции выдает null
4) Параметры функции записаны объектом, а нужно просто передавать 3 параметра: (

- calculate({ num1, num2, operation })
+ calculate(num1, num2, operation)

)
5) В функцию calculate() передаете value переменной operation, но не вызываете, вместо этого вызываете OPERATIONS, а нужно именно operation

- switch (OPERATIONS)
+ switch (operation)

Переписал под свой лад. Я так понимаю вы этого эффекта хотели?

<button id="mainbutton">Создать фигуру</button>

<script>
        let colors = ['red', 'green', 'blue'];

        $(document).on('click', '#mainbutton', function(){
            let div = document.createElement('div')
            
            let size = Math.floor((Math.random()*100)+5);
            let randomColor = colors[Math.floor(Math.random()*colors.length)]

            $(div).css("width", size+"px")
            $(div).css("height", size+"px")
            $(div).css('backgroundColor', randomColor)
            document.body.append(div)
        });


        
    </script>

Задайте параметру translateZ значение половины высоты контейнера:

translateZ(30px)