The given webpage displays a growing orange circle when the Show Circle button is clicked. Your goal is to show a text message inside the circle as show below, by creating callbacks for a Promise object.

The circle.js file contains a click event handler showCircleClick() for the Show Circle button that calls showCircle() to display the orange circle.

The showCircle() function returns a Promise object that may be fulfilled or rejected.

The promise is fulfilled in one second if showCircle() is not called a second time before the second elapses.

The promise is rejected if showCircle() is called a second time before the second elapses.

Modify the showCircleClick() to call showCircle() and handle the fulfilled or rejected callbacks using the returned Promise's then() method.

If the promise is fulfilled, the

containing the circle is passed to the callback function. The message "Ta da!" should be added to the

's inner HTML.

If the promise is rejected, an error message is passed to the callback function. The error message should be displayed using alert().

If your modifications are written correctly, you should see the "Ta da!" message appear one second after the Show Circle button is clicked. If you click Show Circle twice quickly, you should see the error message appear in the alert dialog box, as shown below.