$9\mathrm{.}7\mathrm{.}3$ Hands$-$On Practice

Project $1$: Enhanced Media Player

Difficulty Level: Beginner

Overview

This project expands the media player exercise from the lab. It provides an opportunity for some straightforward DOM manipulations and event handling. Figure $9\mathrm{.}25$ indicates what the final result should look like in the browser $($video files may be different than those shown here$).$

Figure $9\mathrm{.}25$ Finished project $1$

Figure $9\mathrm{.}25$ Full Alternative Text

Instructions

You have been provided with the necessary styling and markup already. Examine $($chapter$09-$project$01.$html$)$ in the editor of your choice.

Examine ch$09-$proj$01.$js and notice the files array. The four elements in that array correspond to the name of the corresponding image and video files in the images and videos folders.

Begin by modifying ch$09-$proj$01.$js and create a list of available videos by looping through the provided files array and adding the relevant elements to the