Before attempting to work on this project:

Download and Extract the Data Files$-$Chapter$02$ js$02$ project$03$ folder in your week$2$ module.

In this project, you will create an application that responds to the movements of the mouse over and out of a page object. The event that triggers the mouse over the object is called mouseover while moving the mouse out from an object triggers the mouseout event. In this application, you will display a different message depending on the shape the mouse is hovering over or no message at all if the mouse is hovering over no shape. Figure $2-32$ shows a preview of the page with the message for the mouse hovering over the circle.

Hands$-$On Project $2-3.$png

Do the following:

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.

Please take screenshots of your work.

Please submit your file and screenshots for grading.