jQuery changing color of <td> background on click

Question

I'm a bit rough with jQuery so bear with me here. :)

The goal of the code is to on click, if the square is white, color it with the selected color. If it is the selected color, set it back to white. It works except when going from a color to another color, there's a spot of white inbetween. For example:

When I do black > blue, it processes as black > white > blue.

Here's the snippet of my code

$(pixelCanvas).on("click", "td", function(){
let background = $(this).css("background-color");
let isEmpty = !background || background === "rgb(255, 255, 255)" ||
   background === "#ffffff";
let isNotColor = background !== color;
if(isEmpty){
    $(this).css("background-color", color); 
} else if(isNotColor){
    $(this).css("background-color", color);
} else {
    $(this).css("background-color", "#ffffff");
}

});

And here's my codepen link

https://codepen.io/ashleighc207/pen/QaezPO

Thank you in advance!!

Answer 1

So I found a function to convert rgb to hex here and used it on your background color. It seems to work fine, but I am not sure if it will work consistently across all browsers and operating systems, tested Chrome with Windows 10. Either way it should give you an idea on what you need to focus on and that is making sure your color codes are all in the same format.

/* global $ */
$(document).ready(function() {
  let color = $("#colorPicker").val();
  let row = $(".row");
  let column = $(".column");
  let submitBtn = $("#submitBtn");
  let pixelCanvas = $("#pixel_canvas");
  let mouseDown = false;


  function makeGrid(height, width) {
    for (let i = 0; i < height; i++) {
      let tableRow = $("<tr class=\"row\"></tr>");
      for (let j = 0; j < width; j++) {
        tableRow.append("<td class=\"column\"></td>");
      }
      pixelCanvas.append(tableRow);
    }
  }

  function removeGrid() {
    $("tr").remove();
  }

  function rgbToHex(rgb) {
    var a = rgb.split("(")[1].split(")")[0].split(",");
    return "#" + a.map(function(x) {
      x = parseInt(x).toString(16);
      return (x.length == 1) ? "0" + x : x;
    }).join("");
  }

  $(submitBtn).on("click", function(evt) {
    evt.preventDefault();
    removeGrid();
    let inputHeight = $("#inputHeight").val();
    let inputWidth = $("#inputWidth").val();
    makeGrid(inputHeight, inputWidth);
  });

  $("#colorPicker").on("change", function() {
    color = $("#colorPicker").val();
  });

  $(pixelCanvas).on("mousedown", function() {
    mouseDown = true;
  });

  $(pixelCanvas).on("click", "td", function() {
    let background = rgbToHex($(this).css("background-color"));
    let isEmpty = !background || background === "rgb(255, 255, 255)" ||
      background === "#ffffff";
    let isNotColor = background !== color;

    console.log(color);
    console.log(background);
    console.log(isEmpty);
    console.log(isNotColor);

    if (isEmpty) {
      $(this).css("background-color", color);
    } else if (isNotColor) {
      $(this).css("background-color", color);
    } else {
      $(this).css("background-color", "#ffffff");
    }
  });


  $(pixelCanvas).on("mouseup", function() {
    mouseDown = false;
  });

  $(pixelCanvas).on("mousemove", "td", function(evt) {
    evt.preventDefault();
    if (mouseDown) {
      $(this).attr("style", `background-color: ${color}`);
    }
  });
});

body {
  margin: 0px;
  margin-bottom: 500px; /* added this cause logs are blocking screen */
}

.container {
  text-align: center;
  font-family: Century Gothic, helvetica;
  display: flex;
  flex-direction: column;
  height: 20%;
  min-height: 100vh;
}

.row,
.column {
  background-color: #FFFFFF;
}

.content {
  display: flex;
  text-align: center;
  height: 80%;
  padding: 2%;
  justify-content: space-around;
}

.column-1 {
  display: flex;
  order: 1;
  flex: 0 1 20%;
  flex-direction: column;
}

.column-2 {
  display: flex;
  order: 2;
  flex: 0 1 80%;
  flex-direction: column;
}

.heading-one {
  flex: 0 1 100%;
  font-family: Century Gothic, helvetica;
  font-size: 70px;
  margin: 0px;
  height: 10%;
}

.form-group {
  padding: 5% 0%;
}

#pixel_canvas,
.row,
.column {
  border: 1px solid black;
}

#pixel_canvas {
  border-collapse: collapse;
  margin: 0 auto;
}

.row {
  height: 20px;
}

.column {
  width: 20px;
}

#inputHeight,
#inputWidth {
  width: 6em;
}

#submitBtn,
#colorPicker {
  border-radius: 5px;
}

#colorPicker {
  border: none;
  box-shadow: 1px 1px 1px #777777;
}

<!DOCTYPE html>
<html>

<head>
  <title>Pixel Art</title>
  <link rel="stylesheet" href="stylesheet.css">
</head>

<body class="container">
  <h1 class="heading-one">Pixel Art Maker</h1>
  <div class="content">
    <div class="column-1">
      <h2 class="heading-two">Choose Pixel Grid Size</h2>
      <form id="sizePicker">
        <div class="form-group">
          <label for="input_height">
                    Grid Height:
                </label>
          <input type="number" id="inputHeight" name="height" min="1" max="50" value="1">
        </div>
        <div class="form-group">
          <label for="input_width">
                    Grid Width:
                </label>
          <input type="number" id="inputWidth" name="width" min="1" value="1">
          <div class="form-group">
            <input type="submit" id="submitBtn" value="Create!">
          </div>
        </div>
      </form>
      <h2 class="heading-two">Pick A Color</h2>
      <div class="form-group">
        <input type="color" id="colorPicker">
      </div>
    </div>
    <div class="column-2">
      <h2 class="heading-two">Design Canvas</h2>
      <table id="pixel_canvas"></table>
    </div>
  </div>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="designs.js"></script>
</body>

</html>

EDIT: Added margin to bottom so logs don't block inputs and specified browser and OS.