$/4$

$//$ Select the fourth box with a selector of your choice. Change the text inside

$//$ the box to the string "Four"

document.querySelectorAll$("$problem$-$four"$)[3].$textContent $=$ "Four";

$//5$

$//$ Select the fifth box. Remove the text $"5",$ and replace it with a child button that says $"5!"$

let fifthBox $=$ document.getElementsById$("$problem$-$five"$)$;

fifthBox.innerText $=\text{'}\text{'}$

let fifthButton $=$ document.createElement$("$button$")$;

fifthButton.innerText $=\text{'}5!\text{'}$

fifthBox.appendChild$($fifthButton$)$

$//6$

$//$ Select the span element. Remove it from the DOM.

const allSquares $=$ document.querySelectorAll$(\text{'}.$square'$)$

allSquares.forEach$(($square$,$i$)=>\{$

$$ if$($i $=6)\{$

$$ square.remove$()$

$\}$

$\})$

$//7$

$//$ Select the element with the number $7,$ and change the number to $6($because you

$//$ just removed number $6!)$

let numberSevenElement $=$ document.querySelector$(".$box:nth$-$child$(7)")$;

if $($numberSevenElement$)\{$

$$ numberSevenElement.textContent $="6"$;

$\}$

$//8$

$//$ Select the last box, and add the class of "last". This will apply new styling

$//$ to the box if successful. Change the text inside to box to "END!!!"

let lastBox $=$ document.querySelector$(".$box:last$-$child"$)$;

if $($lastBox$)\{$

$$ lastBox.classList.add$("$last$")$;

$$ lastBox.textContent $=$ "END!!!";

$\}$