FIGURE 10.28 Completed Project 2
Instructions
You have been provided with the necessary styling and markup already.
Examine ch10-proj02.html in the editor of your choice. Notice the containers for the fetched data in the
542
CHAPTER 10 JavaScript 3: Additional Features
When play is selected, fetch data, then ..
ect2-Shakespeare
ACTI
2 ... populate the other <select> lists from the play data, and ...
Display the current scene (along with the play and act titles).
If the user selects a different act or scene, then display it.
5 ... if the user clicks Filter, then only show speeches from the specified player, and highlight the entered text (using the <h> tag).
FIGURE 10.28 Completed Project 2
Instructions
1. You have been provided with the necessary styling and markup already. Examine ch10-proj02.html in the editor of your choice. Notice the containers for the fetched data in the <aside> and <section> 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 ch10-proj02.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 <select>, which contains a preset list of plays. When the user selects a play, fetch the play data by adding the value attribute of the <option> for the play as a query string, as shown in the comments in ch10-proj02.js. When the fetched play is retrieved, populate the three other <select> elements from this data. Also populate the <section id="playHere">, <article id="actHere">, and <div id="sceneHere"> elements with the first scene from the first act of the selected play.
10.6 Chapter Summary
4. 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 <select> 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 <select> 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.
PROJECT 3: Stock Dashboard DIFFICULTY LEVEL: Advanced
