For this problem, you will write a program that will allow a user to calculate a letter-based grade, based on a grade percentage. Here is a description of how your program should look and behave: - Initially, text "Grade Calculator" and "Average?" should be displayed on the canvas as seen in Figure 1. (Do not worry about matching exact color or size.) - When the user presses a key. show the keys pressed beside "Average:" - When the user clicks the mouse, show the calculated grade in the bottom right corner of the canvas. - If a grade is showing and the user clicks the mouse, reset the canvas, clearing both the grade and average text. (The canvas should looke like it initially did.) \begin{tabular}{|l|l|} \hline Grade Calculator \\ Average: & Grade Calculator \\ Average: 65 \\ \hline \end{tabular} Figure 1: The initial canvas ready for input (left. The canvas after a user presses 6 and 5 (middle). The canvas after the user clicks the mouse (right). Below is a table of which grade should be assigned to each average. Here are some suggestions for how to design your program, especially with regard to the Model-ViewController design pattern. - You will want to use at least 2 global variables in your program: these are the current keys pressed and the grade to be displayed. - You should have a function that takes an average as a parameter. This function should have conditionals to determine the appropriate grade and return it. - Your keyPressed() function should update your global keys pressed variable. - Your mouseClicked() function should have a conditional. It will either calculate an appropriate grade. or reset the canvas. NOTE: You may assume that the user will always type numbers. You do not have to handle incorrect data by checking for only numbers. (Feel free to handle this as an extra challenge, but it will not be worth marks.)