I have been stack for a day on this. Help please! I posted what I was suppose to do at bottom.
function setupPuzzle() {
allCells = document.querySelectorAll("table#hitoriGrid td");
for (var i = 0; i < allCells.length; i++) {
allCells[i].style.backgroundColor = "white";
allCells[i].style.color = "black";
allCells[i].style.borderRadius = "0";
allCells[i].addEventListener("mousedown",
function(evt) {
if (evt.shiftKey) {
allCells[i].style.backgroundColor = "white";
allCells[i].style.color = "black";
allCells[i].style.borderRadius = "0";
}
else if (evt.altKey) {
allCells[i].style.backgroundColor = "black";
allCells[i].style.color = "white";
allCells[i].style.borderRadius = "0";
}
else {
allCells[i].style.backgroundColor = "rgb(101, 101, 101)";
allCells[i].style.color = "white";
allCells[i].style.borderRadius = "50%";
}
});
evt.preventDefault();
allCells[i].addEventListener("mouseover",
function(evt) {
if(evt.shiftKey) {
allCells[i].style.cursor = "url(jpf_eraser.png), alias";
} else if (evt.altKey) {
allCells[i].style.cursor = "url(jpf_block.png), cell";
} else {
allCells[i].style.cursor = "url(jpf_circle.png), pointer"
}
});
allCells[i].addEventListener("mouseup", checkSolution);
}
}
Within the for loop, add a mousedown event listener for each cell in the allCells collection that changes the cell’s appearance depending on whether the Shift key, the Alt key, or no key is pressed by the user. Add the following commands to the anonymous function for the mousedown event:
Change the background color to white, the font color to black, and the border radius to 0 if the user is pressing the Shift key. Change the background color to black, the font color to white, and the border radius to 0 if the user is pressing the Alt key. Otherwise, change the background color to rgb(101, 101, 101), the font color to white, and the border radius to 50%. To avoid inadvertently selecting the text of the table cells, include a command to prevent the default action of the browser in response to the mousedown event. Rebecca wants a different mouse cursor depending on whether the user is pressing the Shift key, the Alt key, or no key when the mouse pointer moves over a puzzle cell. Within the for loop, add a mouseover event listener for each puzzle cell that runs an anonymous function that
Changes the cursor to the jpf_eraser.png image or the generic cursor named “alias” if the user is pressing the Shift key. Changes the cursor to the jpf_block.png image or the generic cursor named “cell” if the user is pressing the Alt key. Otherwise, changes the cursor to the jpf_circle.png image or the generic cursor named “pointer”. Finally, within the for loop, add an event listener that runs the checkSolution() function in response to the mouseup event to test whether the user has solved the puzzle