Sketchpad Project (web development 101) gradiant and rainbow mode features not working


#1

Hello, I am trying to complete the sketchpad exercise from web development 101, but my gradiant and rainbow features won’t work:

Essentially, upon pressing the “gradiant mode” or “rainbow mode”, the actionListener for the regular “fill in the squares” functionality is removed, but the new functionality of either gradiant or rainbow cells is not added.

The javascript is as follows (with the Jsfiddle link below):
//initialize variables
let resetBtn = document.querySelector("#reset");
let gradBtn = document.querySelector("#gradiant");
let rainBtn = document.querySelector("#rainbow");

let sketchGrid = document.querySelector("#grid");

//event listeners
resetBtn.addEventListener("click", resetGrid);
gradBtn.addEventListener("click", gradiantMode);
rainBtn.addEventListener("click", rainbowMode);


//functions
//populate grid using divs
function getGrid() {
    let numSquares = prompt("Sketch size (length/width in number of squares)?");

    for (var row = 0; row < numSquares; row++) {
        var rowSquares = document.createElement("div");
        rowSquares.classList.add("row-container");
        sketchGrid.appendChild(rowSquares);

        for (var col = 0; col < numSquares; col++) {
            var cell = document.createElement("div");
            cell.classList.add("grid-cell");

            cell.addEventListener("mouseover", activateCell);
            rowSquares.appendChild(cell);
        }
    }
}

function resetGrid() {
    let sketch = document.querySelector("#grid");
    
    while (sketch.firstChild) {
        sketch.removeChild(sketch.firstChild);
    }

    getGrid();
}

function rainbowMode() {
    console.log("RAINBOW FUNCTION WENT THROUGH")

    // remove initial event listeners and add gradient event listeners
    let cells = document.querySelectorAll(".grid-cell");
    cells.forEach(function(thing) {
        console.log("I FOUND AN ELEMENT");
        thing.removeEventListener('mouseover', activateCell);
        thing.removeEventListener('mouseover', gradiantCell);
        thing.addEventListener('mouseover', rainbowCell);
    });
};

function gradiantMode() {

    //remove any previous event listeners and add new event listeners
    let cells = document.querySelectorAll(".grid-cell");

    cells.forEach((cell) => {
        cell.removeEventListener("mouseover", activateCell);
        cell.removeEventListener("mouseover", rainbowCell);
        cell.addEventListener("mouseover", gradiantCell);
    });
};

function activateCell(e) {
    e.target.classList.add("active");
}

function gradiantCell(e) {
    e.target.style.backgroundColor = gradiant(e);
}

function rainbowCell(e) {
    e.target.style.backgroundColor = rainbow(e);
}

function gradiant(e) {
    let style = e.tartget.style.backgroundColor;

    if (!style) {
        style = "rgba(0, 0, 0, 0.1)";
    } 
    else if (style.substr(0,12) != "rgba(0, 0, 0)") {
        style = "rgba(0, 0, 0, 0.1)";
    }
    else if (style == "rgba(0, 0, 0, 1)") {
        style = style.replace("1", "0");
    }
    else {
        let alpha = style.substr(15,17);
        style = style.replace(alpha, "${parseFloat(alpha) + 0.1}");
    }
    return style;
}

function rainbow() {
    let red = parseInt(Math.random() * 255);
    let green = parseInt(Math.random() * 255);
    let blue = parseInt(Math.random() * 255);

    return "rgba(${red}, ${green}, ${blue})";
}

I have the JSfiddle link here that shows all of my code in the project: http://jsfiddle.net/rq7ywaes/

Any help would be greatly appreciated. Thanks in advance.


#2

The string interpolation was not working. So the cells were changed into rgba(#{red}, #{green}, #{blue}). Javascript’s template literals are very finicky and not #{}. I got your rainbow mode to work with this:

function rainbow() {
let red = parseInt(Math.random() * 255);
let green = parseInt(Math.random() * 255);
let blue = parseInt(Math.random() * 255);
console.log( ‘rainbow color: ’ + red +’, ‘+green+’, ‘+blue )
return “rgb(”+red +’, ‘+green+’, '+blue+")";
}

You also have a typo with the gradiant function, “tartget” instead of “target”. That function is a mess though. Maybe consider changing the style.opacity of the cell, instead of trying to read and rewrite rgba background values.

The logic of your functions are a bit off. You should have a function to just clean off the colors on the grid, without asking user for grid sizes, over and over. In that way, the canvas can be reset when user draws on a different color, without needing to rebuild the grid.

While using console log for debugging, it’s always a good idea to insert your variables in the log, so you know they are what they are suppose to be. Don’t just return a generic statement.

Here’s a link to javascript’s template literals, in case you want to do everything the right way: