What to do Please follow the steps to complete debugging and function creation tasks 1. Download and extract lab4_1_1.html, lab4_1_2.html, and lab4_1_2.js files. The html webpage is a simple webpage that shows a grid of four divisions like the following. 2 [10 points]. Follow the steps provided in the comments in the script portion of the file to make the grid interactive that satisfy the following requirements: a. When moving the mouse (cursor) over one division, the background color of that division changes to green. b. When clicking on a certain division, the background color of that division changes to blue. In this task, please use the traditional event handler to register event handler (the second way we introduced in class). Hint: you can use ELEMENT.style.backgroundColor (the ELEMENT can be obtained from document.getElementById) to access or change the background color. A sample run looks like the following: 3. [10 points]. Use lab4_1_2.html and lab4_1_2.js in this task. You don't need to change lab4_1_2.html file. First complete all requirements in task 2. Then, add a new interactive feature in this task as follows: c. When moving the mouse (cursor) out of one division, the background color of that division changes to white. The added feature looks like when moving mouse out of the division In this task, please use the addEventListener() method to register event handler (the third way we introduced in class). Also, please use the e.target property ( e is the event object) to get an the source element of the event, where e is the event object passed to the handler function (like the example in class). Hint: check the lecture slides to see the event object. There are no detailed steps given as comments in this task. Please design and implement your steps to solve the problem. = = =