Use your code editor $($Such as: Notepad or the Text Editor within the "Hands$-$on$-$Practices$)$ to open the project$03-02\_$txt$.$html and project$03-02\_$txt$.$js files from the js$03$ project$02$ folder. Enter your name and the date in the comment section of each file and save them as project$03-02.$html and project$03-02.$js$,$ respectively.

Go to the project$03-02.$html file in your code editor and in the head section add a script element to load the project$03-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 project$03-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:

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

Save your changes to the file and then load project$03-02.$html in your browser. Verify that the page displays the $14$ images in the slide gallery along with their captions.

Please take screenshots of your work.

Please submit your file and screenshots for grading.