For this question, you will write a program in python that allows the user to type in a number on the keyboard. When the user clicks the mouse, the program will calculate and display the square of the number that was typed in $($e$.$g$.$ if the user types in the number $12,$ then when the mouse is clicked, your program will display the value $144,$ i$.$e$.122).$ Your program should use Model$-$View$-$Controller design.

Here$$s the trick, though; Processing doesn$$t have any automatic way of letting the user type in a multi$-$digit number. It only detects each individual keypress as it happens. So we$$ll have to use a string variable to keep track of all the digits that have been typed in so far. When the mouse is clicked, we$$ll need to convert our string of digits into a number $($an integer$)$ and display the square of that number.

Your program should behave as follows:

When the program starts: The program simply displays a blank, black canvas.

When the user presses a key: Add any key that the user types to your string of digits. If the user presses a key that is not a digit, it$$s okay if your program crashes $($adding error$-$checking is beyond the scope of this question$).$ Always display the current digits that the user has typed in using the text$()$ function.

When the user clicks the mouse: Convert the digits that have been typed in to an integer and display on the canvas the square of that integer. Then, make sure to reset the digit string variable to the empty string $("")$ so that the user can later type in a different number.