You have been given a very simple HTML file.It has the following HTML elements in

its dom:

● A button with id #getItemsButton

● A span with id #loadingIndicator

● A span with id #error

● A div with id #results

There is also a JavaScript function defined: getDataFromBackend()​, which returns

a Promise.

The Promise returned by that function simulates a WebServer request (it’s not one

really). It will take some time to finish, and it will either return a response,

or fail:

● When succesful, it will return a JavaScript object similar to the

following: {status: 200, items: []}

○ The items​list will contain other objects of the following structure:

{name: ‘Example Name’, price: 15.0}

● When failed, it will return a JavaScript object similar to the following:

{status: 403, message: ‘Permission Denied’}

Your task is to write code that does the following:

● When the #getItemsButton ​gets clicked, getDataFromBackend()​is called.

○ Until the Promise returned by getDataFromBackend()​is finished, the

button should be disabled

○ Until the Promise is finished, #loadingIndicator​should contain the

text Loading...

If the Promise is rejected, please render the error message inside

#error

○ If the Promise is resolved succesfully, please render the number of

items and a list of their names in prices inside #results​. The way

the results are rendered doesn’t really matter.