Please help with the step by step process

Use your code editor to open the project10-04_txt.html and project10-04_txt.js files from the js10 project04 folder. Enter your name and the date in the comment section of each file and save them as project10-04.html and project10-04.js, respectively.

Go to the project10-04.html file in your code editor. Add a script element linked to the project10-04js file. Defer the loading of the script until after the page is loaded. Take some time to study the contents of the file. Note that every chess piece is marked with a span element and given a unique id. White pieces belong to the white class, while black pieces belong to the black class. After you have become familiar with the content and structure of the document, close the file saving your changes.

Go to the project10-04.js file in your code editor. Create a for loop that iterates through all the contents of the pieces collection. For each piece do the following:

Set the value of the pieces draggable property to true.

Create an event handler for the dragstart event that sets the text of event targets id in the dataTransfer object.

Create a for loop that iterates through all the items in the boardSquares node list. Add the tasks described in Steps 5, 6, 7, 8, 9, 10 and 11 to this for loop.

For each item create an event handler for the dragover event. In the anonymous function associated with the event, add a command that prevents the default actions associated with the dragover event.

For each item create an event handler for the drop event that runs an anonymous function. Add the tasks described in Steps 7, 8, 9, 10 and 11 to the function.

Insert a command to prevent the default action associated with the drop event.

Declare the pieceID variable that gets the id value from the dataTransfer object.

Declare the movingPiece variable that references the document element with that id.

If the tag name of the event target equals TD (indicating that you are dropping the piece onto an empty square), append movingPiece as a child of the event target.

Otherwise, if the tag name equals SPAN (indicating the you are dropping the piece onto another piece), do the following:

Store the event target in a variable named occupyingPiece .

Store the parent element of occupyingPiece in a variable named square .

Use the appendChild() method to append movingPiece as a child of square.

Move the occupying piece back to the chess box. If the class name of occupyingPiece equals white then use the appendChild() method to append occupyingPiece to the whiteBox object; otherwise append occupyingPiece to the blackBox object.

Save your changes to the file and then load project10-04.html in your web browser. Verify that you can move pieces from the chess box onto the board. Also verify that moving a piece onto a square that is occupied by another piece, moves the occupying piece back to its box.