Use your code editor $($Such as: Notepad or the Text Editor within the "Hands$-$on$-$Practices"$)$ 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 of 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$$ to the text string $$You $$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$.$

Save your changes to the file and then open project$02-03.$html in your browser. Verify that as you hover your mouse pointer over each shape, a message indicating the shape is displayed on the page and when you move your mouse pointer away from the shape the message disappears.