Write a HTML document with JavaScript code to randomly generate a square in a random color. User can click on Add Square to add a square at a random position within the box in a random color. User can click on Change Colors to change all the colors to random colors. User can click on Delete All to delete all the squares. In a separate CSS file, specify the properties of the outer box (id) and the inner random squares (class). Implement three JavaScript functions corresponding to the three buttons.

addSquare(): create and add a new square div element to the page by using document.createElement()

Use .className property to specify its class name

Use .style.left and .style.top to specify its location

Use appendChild to add the element into the box

changeColors(): give a new randomly chosen color to every square in the box.

Use document.querySelectorAll() to select all the squaresdeleteAll(): delete all the squares in the box.

You can assign an empty string to the elements innerHTML

Also, implement an auxiliary function which is called by addSquare() and changeColors(). getRandomColor(): generate and return a random color string