I need help, how can I get my square box to be cleared and hallow? Its needs to function so that when the Draw the box button is clicked, the textarea below it is cleared and a hollow square box of asterisks with sides of length equal to the number in the textbox above it is printed to the textarea. For example, if the number entered is 10, the output should look like

********** * * * * * * * * * * * * * * * * ********** If the number entered is 4, the output should look like

**** * * * * ****

.html

Draw a box of stars

Enter size of box:

--------------------------------------------------------------------------------------

script.js

document.querySelector('#star-box-area').addEventListener('click', function () { let starString; let whichColumn; let whichRow;

// Use the parseInt function to convert the input to a base-10 integer. const sizeOfBox = parseInt(document.querySelector('#size-of-box').value, 10);

// Make sure the input number is a real positive number. if (Number.isFinite(sizeOfBox) && sizeOfBox > 0) { starString = ''; // Go through each row and column and build mapString from scratch. for (whichRow = 0; whichRow < sizeOfBox; whichRow += 1) { if (whichRow > 0) { starString += ' '; } for (whichColumn = 0; whichColumn < sizeOfBox; whichColumn += 1) { // Math.random() will give a random real number between 0 and 1. if (Math.random() < 0.4) { // 40% of the time, draw a mountain. starString += ' '; } else { // 60% of the time, draw a flat plain. starString += '*'; } } } } else { starString = 'I need a number to draw a box.'; }

// Output the beautiful result. document.querySelector('#star-box-output').value = starString; });