Hands-On Project 3-2 In this project you will generate an image gallery using images of the International Space Station. Each image will be placed within a figure box accompanied by a caption taken from an array of caption text. A preview of the completed project is shown in Figure 3-19. Figure 3-19 Completed Project 3-2 The completed webpage of a project that displays an image gallery. Images from the International Space Station are displayed in figure boxes along with captions. The captions are stored in an array. The webpage has a heading panel with a light-brown background with the following center-aligned text. Hands-on Project 3-2. Below the heading panel 3 rows of images are displayed with captions below each one of them. The first two rows have 5 images each and the third row has 4 images. Above the first row of images is the following heading that is center-aligned. International Space Station Images.Enlarge Image NASA Do the following: Use your code editor to open the project03-02_txt.html and project03-02_txt.js files from the js03 project02 folder. Enter your name and the date in the comment section of each file and save them as project03-02.html and project03-02.js, respectively. Go to the project03-02.html file in your code editor and in the head section add a script element to load the project03-02.js file, deferring the loading of the JavaScript source file until the entire HTML file is loaded. Study the contents of the HTML file and save your changes. Go to the project03-02.js file in your code editor. Below the code that creates and populates the captions array, declare the htmlCode variable, setting its initial value to an empty text string. Create a for loop with a counter that goes from 0 to less the length of the captions array in increments of 1. With each iteration, add the following text to the value of the htmlCode variable: Program code. In the code, the words in the variable names are merged. Line 1: left single angular bracket, figure, right single angular bracket. Line 2: left single quotation mark, i m g alt, equals, left single quotation mark, left single quotation mark, s r c, equals, right single quotation mark, slide i, dot, jpg, right single quotation mark, forward slash, right single angular bracket. Line 3: left single quotation mark, f i g caption, right single angular bracket, caption, left bracket, i, right bracket, left single quotation mark, forward slash, f i g, caption, right single angular bracket. Line 4: left single quotation mark, forward slash, figure, right single angular bracket. where i is the value of the counter for that iteration and captions[i] is the corresponding element from the captions array. After the for loop, change the inner HTML of the document element by the id "gallery" to the value of the htmlCode variable. Save your changes to the file and then load project03-02.html in your browser. Verify that the page displays the 14 images in the slide gallery along with their captions.