Use your code editor to open the project$02-03\_$txt$.$html and project$02-03\_$txt$.$js files from the js$02$ project$03$ folder. Enter your name and the date in the comment section of each file and save them as project$02-03.$html and project$02-03.$js$,$ respectively.

Go to the project$02-03.$html file in your code editor and in the head section add a script element to load the project$02-03.$js file, deferring the loading the external script file until the entire page is loaded. Review the contents of the HTML file and note that the three shapes are placed within div elements with the ids "square", "triangle", and "shape". There is also an empty paragraph with the id "feedback". Save your changes to the file.

Go to the project$02-03.$js file in your code editor. Attach an onmouseover event handler to the element with the id "square". In response to the event run an anonymous function containing a statement that changes the innerHTML property of the element with the id "feedback" $1$ the text string "You $\text{'}$re hovering over the square".

Attach an onmouseout event handler to the element with the id "square". In response to the event run an anonymous function containing a command that changes the innerHTML property of the element with the id "feedback" to an empty text string.

Repeat Steps $3$ and $4$ for the element with the id "triangle".

Repeat Steps $3$ and $4$ for the element with the id "circle".