I'm currently tackling an assignment as part of my learning journey with The Odin Project. You can check it out here:
Despite creating the divs using JavaScript or jQuery as specified in the project requirements, I am unable to get jQuery's .hover function to work on these divs.
Here is a snippet of the JavaScript code I used:
function createGrid(resolution) {
var wr = document.createElement("div");
wr.setAttribute("id", "wrapper");
document.body.appendChild(wr);
for (x = 0; x < resolution; x++) {
for (i = 0; i < resolution; i++) {
var pix = document.createElement("div");
pix.setAttribute("class", "pixel");
wr.appendChild(pix);
}
var clr = document.createElement("div");
clr.setAttribute("class", "clearLeft");
wr.appendChild(clr);
}
}
function getRes() {
var resolution = prompt("Enter your desired grid resolution. Number must be between 3 and 64");
if (resolution > 64 || resolution < 3) {
alert("This number is beyond the acceptable range. Pick a number between 3 and 64");
getRes();
}
createGrid(resolution);
}
// While no errors are showing up in the console, the hover effect is not working after adding the script below
$(document).ready(function() {
$(".pixel").hover(function() {
$(this).css("background-color","black");
}, function(){
$(this).css("background-color", "black");
});
});