let elem = document.getElementById('qq');

let a_click = false

function q(){
    let H = document.getElementById("H").value
    let W = document.getElementById("W").value

    createTable (elem, H , W)
}
q()

function createTable (parent, cols, rows){  
    console.log(rows,cols)
while ( parent.firstChild){
    parent.firstChild.remove()
}
document.onmousedown = function(){
    a_click = true
}

document.onmouseup = function(){
    a_click = false
}
let palitra = document.getElementById('palitra');

    for ( i=0; i<rows; i++){
        
      let tr=document.createElement('tr')  
       

        for (j=0; j<cols; j++){

           let td =  document.createElement('td')
           td.onmouseover = function(){
                if (a_click){

                    td.style.backgroundColor = palitra.value
                }


            }
            td.onclick = function(){
                td.style.backgroundColor = palitra.value
            }
               
           tr.append(td)
        }
        parent.append(tr)
    }
   
    
}




function add_color(){

   let d = element("div")

   d.classList.add("color_element")

   let btn = element("button")

   btn.classList.add("color_button")
   btn.style.backgroundColor = palitra.value


   let c = document.getElementById("container")

    d.append(btn)
    c.append(d)
    console.log(palitra.value)

    btn.onclick = function(){
        palitra.value = rgbToHex(btn.style.backgroundColor)
        console.log(rgbToHex(btn.style.backgroundColor))
    }

   if (c.children.length==24) {
    document.getElementById("btn").disabled = true
}
    let del = element("button")

    del.classList.add("del_btn")
    d.append(del)


    let i = element("i")

    i.classList.add("bi","bi-x-circle", "del")
    del.append(i)
    
    del.onclick=function(){
        d.remove()
        document.getElementById("btn").disabled = false
    }
   
}

function element(a){
    return document.createElement(a)
}

function rgbToHex(col)
{
    if(col.charAt(0)=='r')
    {
        col=col.replace('rgb(','').replace(')','').split(',');
        var r=parseInt(col[0], 10).toString(16);
        var g=parseInt(col[1], 10).toString(16);
        var b=parseInt(col[2], 10).toString(16);
        r=r.length==1?'0'+r:r; g=g.length==1?'0'+g:g; b=b.length==1?'0'+b:b;
        var colHex='#'+r+g+b;
        return colHex;
    }
}

function picture(){
    let d = element("div")
    document.getElementById("add_div").append.d
}