Children's creativity has been affected the most at this covid time. So for a kids curiosity, I did a little too prep, which is a way to create a drawing by filling colors in a table box.

Introduction

This is the article of the Building an play tool for kids using html and javascript. Where dynamically generated a HTML table with its properties derived from user input. There are 2 main categories of user inputs. The 1st category relates to the overall properties of the table, like the no. of cols, rows, etc, and the 2nd category relates to the properties of each cell in the table.

So let's start,

Here firstly I'll use sublime edito to run the code.

First Simple create an index.html file looks in which you have to create form as depict below image

Here no. of cols and rows will decide table size , Simple cell data mean text which you want to show inside cell as well as you can adjust css using cell width and height. Colors will draw cell as per selected color, Apart from it if you want to disable editing then set an counter once counter will be finish then table won't be editable anymore.

  <div class="form-group col-md-6">
                    <button class="btn btn-primary" onclick="clock();">Start counter</button>
                    <button class="btn btn-primary" onclick="clearInterval(myTimer);">Stop counter</button>

To run the counter and to stop, two functions have been done to it. Once you selected all element and will click on generate table , generate() function will invoke

function generate() {
    var i;
    var p = document.getElementById("appData");
    var k = document.createElement("hr");
    var e = document.createElement("hr");
    p.appendChild(k);
    var d = document.getElementById("data");
    var n = document.createElement("table");
    var b = document.createElement("body");
    i = document.getElementById("cols").value;
    if (isNaN(i) || i < 1 || i > 100) {
        alert("Not valid input for no. of column, Cannot be blank and must be in range 1 - 100");
        return false;
    } else {
    }
    var o;
    o = document.getElementById("rows").value;
    if (isNaN(o) || o < 1 || o > 100) {
        alert("Not valid input for no. of row, Cannot be blank and must be in range 1 - 100");
        return false;
    } else {
    }
    var m = document.getElementById("height").value;
    if (isNaN(m) || m < 1 || m > 50) {
        alert("Not valid input for no. of height, Cannot be blank and must be in range 1 - 50");
        return false;
    } else {
    }
    var a = document.getElementById("width").value;
    if (isNaN(a) || a < 1 || a > 50) {
        alert("Not valid input for no. of width, Cannot be blank and must be in range 1 - 50");
        return false;
    } else {
        alert("Input OK");
    }
    for (var h = 0; h < o; h++) {
        var g = document.createElement("TR");
        b.appendChild(g);
        for (var j = 0; j < i; j++) {
            var c = document.createElement("TD");
            c.width = document.getElementById("width").value;
            c.height = document.getElementById("height").value;
            var l = d.value;
            var f = "cell [" + j + ", " + h + "]";
            c.setAttribute("id", f.toString());
            c.addEventListener("click", function () {
                cellClicked(this);
            });
            c.addEventListener("mouseover", function () {
                mouseHover(this);
            });
            if (l) {
                c.appendChild(document.createTextNode(l));
            } else {
                c.appendChild(document.createTextNode("Cell" + j + "," + h));
            }
            g.appendChild(c);
        }
    }
    n.appendChild(b);
    p.appendChild(n);
    p.appendChild(e);
}

This snippet create dynamic table. Once it will done then move your cursor and select various colors. Your table will look a like below image

You can reach for Source Code to this build this small tool from my GitHub Repository. Small Playtool for Kids

In the event that you like my substance and need to help my endeavors please like👍🏻, share📲 and subscribe get advised at whatever point I post another blog.

Take care & stay safe

Thank you