color btn's

main.js

@@ -5,7 +5,7 @@ let a_click = false
 
 
 function createTable (parent, cols, rows){  
-let table = document.createElement('table')
+
 document.onmousedown = function(){
     a_click = true
 }
@@ -36,9 +36,72 @@ let palitra = document.getElementById('palitra');
                
            tr.append(td)
         }
-        table.append(tr)
+        parent.append(tr)
     }
-    parent.append(table)
+    
 }
 
 createTable (elem, 20, 20)
+
+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;
+    }
+}
+