dot grid exists To start I used JS to create 25 dots. I then styled them with CSS Grid to organize them into a grid.

vertical grid lines exist I used a similar process to make the vertical lines of the grid. They will have to be seperate elements to check if they have been clicked.

horizontal grid lines exist Same process as that for adding the vertical grid lines.

can click to add line I used the loops to add event listeners that when clicked change the color of the line from gray to red.

can hover to preview line I used event listeners again that when hovered over change the color of the line from gray to light gray.

lines are added in better order for array I changed the way the lines were added to nested for loops that will correspond to its location in the array.

function that can check if a box is surrounded exists I made my pseudo-code into a real function as well as tweaking the initial grid loop so a the grid can be checked for closed boxes.

lines will now alternate color and boxes will fill in with the color that closed them I added the gameplay loop and did some debugging to tie together most of the game's functions.

points are counted and player is granted an extra turn for earning one I added conditions to tell if a box was filled and by whom to grant players who earn points an extra turn and tally up the winner.