Creating a colorable, clickable grid (javascript)

Question

I'm working on a school project (the last one in my introduction to programming course). The html and css have been given. We need to allow the user to create a grid and then color boxes to make pixel art.

I've run into two issues.

My table isn't clearing when the user hits submit to create a new table, and
I can't get color into my grids.

I'd really appreciate any help that can be given.

// Select color input
let inputColor = document.getElementById ("colorPicker");

// Select size input
let table = document.getElementById("pixelCanvas");
let iHeight = document.getElementById ("inputHeight");
let iWidth = document.getElementById ("inputWidth");


// Make the grid
let sPicker = document.getElementById("sizePicker");
sPicker.addEventListener("submit", function(event) {
  event.preventDefault();
  makeGrid()
});


// When size is submitted by the user, call makeGrid()
function makeGrid() {
  const height = iHeight.value;
  const width = iWidth.value;
  for (var w = 0; w < width; w++){
    const row = table.insertRow();
    for (var h = 0; h < height; h++){
      const cell = row.insertCell();
    }
  }
  let cPicker = document.getElementsByClassName("cell");
  cPicker.addEventListener("click", function (event) {
    event.preventDefault();
    cell.style.backgroundColor = inputColor;
    document.appendChild("cell");
    table.innerHTML = grid;
  });
}

The rest of the code is here: https://github.com/shearda/pixelartmaker/

Gaurav · Accepted Answer · 2021-01-09 17:21:39Z

1

By your words, I am assuming that you want that

When you Click on Submit it should reset the existing table.
When You change the color and click on any cell that cell be filled with selected color only.

I made little changes to js and html file,

Html file change: replace table with div of same id,
JS change you were attaching event listener incorrectly,


 /* you didn't attach any class to your cell so you will get null in this,
and getByClassName returns list of elements so you need to iterate over the list to attach event
*/
  let cPicker = document.getElementsByClassName("cell"); 
  cPicker.addEventListener("click", function (event) {
    event.preventDefault();
    cell.style.backgroundColor = inputColor;
    document.appendChild("cell");
    table.innerHTML = grid;
  });

Give this a try

// Select color input
let inputColor = document.getElementById("colorPicker");

// Select size input
let tableCanvas = document.getElementById("pixelCanvas");
let iHeight = document.getElementById("inputHeight");
let iWidth = document.getElementById("inputWidth");


// Make the grid
let sPicker = document.getElementById("sizePicker");
sPicker.addEventListener("submit", function (event) {
    event.preventDefault();
    makeGrid()
});


// When size is submitted by the user, call makeGrid()
function makeGrid() {
  let table = document.createElement('table')
    const height = iHeight.value;
    const width = iWidth.value;
    for (let w = 0; w < width; w++) {
        const row = table.insertRow();
        for (let h = 0; h < height; h++) {
            const cell = row.insertCell();
            cell.addEventListener("click",event=>{
                event.preventDefault();
                event.target.style.backgroundColor = inputColor.value
            })
        }
    }
    let children = tableCanvas.childNodes? tableCanvas.childNodes:[]
    if(children && children.length===1){
        tableCanvas.replaceChild(table,children[0])
    }else{
        tableCanvas.append(table)
    }
}

body {
    text-align: center;
}

h1 {
    font-family: Monoton;
    font-size: 70px;
    margin: 0.2em;
}

h2 {
    margin: 1em 0 0.25em;
}

h2:first-of-type {
    margin-top: 0.5em;
}

table,
tr,
td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

tr {
    height: 20px;
}

td {
    width: 20px;
}

input[type=number] {
    width: 6em;
}

<!DOCTYPE html>
<html>
<head>
    <title>Pixel Art Maker!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Pixel Art Maker</h1>

    <h2>Choose Grid Size</h2>
    <form id="sizePicker">
        Grid Height:
        <input type="number" id="inputHeight" name="height" min="1" value="1">
        Grid Width:
        <input type="number" id="inputWidth" name="width" min="1" value="1">
        <input type="submit">
    </form>

    <h2>Pick A Color</h2>
    <input type="color" id="colorPicker">

    <h2>Design Canvas</h2>
    <div id="pixelCanvas"></div>

    <script src="designs.js"></script>
</body>
</html>

edited Jan 9, 2021 at 17:21

answered Jan 9, 2021 at 17:16

Gaurav

5435 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Aalexander Over a year ago

Nice solution!!

Aalexander Over a year ago

lol, if you mean with the comment in the other answer me. I am not the OP.

Gaurav Over a year ago

sorry i am little bad with abbreviation.

Aalexander Over a year ago

The Original Poster

Amanda Sheard Over a year ago

Thank you very much! This solved my problem completely :) 2 questions: The code works without changing the table id to a div, but doesn't work without the "let table =" line (20). Why is it needed? Also, are you able to explain the part from let children (line 33) down to the bottom? It looks like the old empty cell is being replaced with a colored cell of the same value but why does it need to be in and if/else statement? Thank you again! Really appreciate your help

|

qafoori · Accepted Answer · 2021-01-09 16:01:21Z

0

Fortunately, I was able to solve your problem. If you need more explanation, leave a comment below this answer so I can explain...

let table = document.getElementById("pixelCanvas");
let iHeight = document.getElementById ("inputHeight");
let iWidth = document.getElementById ("inputWidth");


let sPicker = document.getElementById("sizePicker");
sPicker.addEventListener("submit", function(event) {
  event.preventDefault();
  makeGrid()
});


function makeGrid() {
  table.innerHTML = '';
  const height = iHeight.value;
  const width = iWidth.value;
  let inputColor = document.getElementById("colorPicker").value;
  for (var w = 0; w < width; w++){
    const row = table.insertRow();
    for (var h = 0; h < height; h++){
      row.insertCell().style.backgroundColor = inputColor;
    }
  }
}

body {
    text-align: center;
}

h1 {
    font-family: Monoton;
    font-size: 70px;
    margin: 0.2em;
}

h2 {
    margin: 1em 0 0.25em;
}

h2:first-of-type {
    margin-top: 0.5em;
}

table,
tr,
td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

tr {
    height: 20px;
}

td {
    width: 20px;
}

input[type=number] {
    width: 6em;
}

<!DOCTYPE html>
<html>
<head>
    <title>Pixel Art Maker!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Pixel Art Maker</h1>

    <h2>Choose Grid Size</h2>
    <form id="sizePicker">
        Grid Height:
        <input type="number" id="inputHeight" name="height" min="1" value="1">
        Grid Width:
        <input type="number" id="inputWidth" name="width" min="1" value="1">
        <input type="submit">
    </form>

    <h2>Pick A Color</h2>
    <input type="color" id="colorPicker">

    <h2>Design Canvas</h2>
    <table id="pixelCanvas"></table>

    <script src="designs.js"></script>
</body>
</html>

answered Jan 9, 2021 at 16:01

qafoori

9619 silver badges14 bronze badges

4 Comments

Aalexander Over a year ago

why innerHTML tables content, why not create a new table in makeGrid()

qafoori Over a year ago

actually the innerHTML appends any nodes(tags - elements) in an element that you want. And innerHTML = '', removes all nodes in your table element. In this case, when you call innerHTML = '', all tds and trs will be remove and table will be ready to append new tds and trs. for more explanations i want to refer you to HTML DOM innerHTML Property.

qafoori Over a year ago

@amanda-sheard, If your issue is resolved then I invite you to accept my answer, and if it was helpful (sounds like it was) then please also remember to upvote it as well (if you haven't already). Cheers

Amanda Sheard Over a year ago

Thank you very much for taking the time to help. With this code, its changing the entire table upon creating of the table. After generating an empty table, I want the user to be able to change individual cells to that color. Guarav's answer works for my purposes. But I still really appreciate you answering. Thank you!

Collectives™ on Stack Overflow

Creating a colorable, clickable grid (javascript)

2 Answers 2

10 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related