This project focuses on the first two sections of the chapter $($array functions and

prototypes$/$classes$/$modules$).$ It also uses fetch to retrieve data. Figure $10\mathrm{.}28$ indi $$ cates what the

final result should look like in the browser. $542$ CHAPTER $10$ JavaScript $3$: Additional Features

Instructions $1.$ You have been provided with the necessary styling and markup already. Examine

ch$10-$proj$02.$html in the editor of your choice. Notice the containers for the fetched data in the

and elements. Notice the sample markup for the play data. This will be eventually commented

out and replaced with JavaScript code that programmatically generates this markup. $2.$ Examine

ch$10-$proj$02.$js in the editor of your choice. In it$,$ you will see the URL for the external API that

will provide the color scheme data. Examine this URL in the browser in order to see the structure

of the data. A Shakespeare play contains multiple acts; each act contains multiple scenes. $($To

reduce the size of the downloaded files, not all acts and scenes have been included$).3.$ Add a

change event handler to the first, which contains a preset list of plays. When the user selects a

play, fetch the play data by adding the value attribute of the for the play as a query string, as

shown in the comments in ch$10-$proj$02.$js$.$ When the fetched play is retrieved, populate the three

other elements from this data. Also populate the $,$ and

elements with the first scene from the first act of the selected play. $12534$ When play is

selected, fetch data, then $......$ populate the other lists from the play data, and $......$ if user clicks

Filter, then only show speeches from specified player, and highlight the entered text $($using the

tag$).$ If user selects a different act or scene, then display it$.$ Display the current scene $($along

with the play and act titles$).$ FIGURE $10\mathrm{.}28$ Completed Project $24.$ To make the code more

manageable, create classes named Play, Act, and Scene, which will be responsible for

outputting the relevant DOM elements. Using object$-$oriented techniques, the Play class

will contain a list of Act objects, the Act class will contain a list of Scene objects, while the

Scene class will contain a list of speeches. These classes will reside within a JavaScript

module named play$-$module.js$.5.$ Add event handlers to the other elements. They will

change what part of the play is displayed. $6.$ The filter button will highlight all occurrences

of the user$-$entered text in the play and only show the speeches from the specified player.

Guidance and Testing $1.$ Break this problem down into smaller steps. First verify the fetch

works, perhaps with a simple console.log statement. Then populate the lists based on the

fetched data. $2.$ You may decide to move your code into classes within your module after

you finished your code, or you may decide to work with classes and modules right from the

start. This latter approach was that used by the author