chubby/happy_lights
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: chubby:0fb1bca57b91f5d0b97f29112ebde355e754d747
Branches Tags
chubby:master
..
compare: chubby:83abbc602372aca2a405ff8960fe54b9e8368557
Branches Tags
chubby:master

2 Commits
0fb1bca57b ... 83abbc6023

Author SHA1 Message Date
chubby
83abbc6023 color btn's 2021-11-22 17:43:54 +03:00
chubby
e3fcbb18b4 add btn's 2021-11-22 17:42:32 +03:00
2 changed files with 122 additions and 15 deletions
Show Stats Expand all files Collapse all files

64
index.html
View File

@ -10,22 +10,24 @@
background-color: rgb(223, 223, 223);
}
.table td{
td {
padding: 10px;
border: 1px solid black;
background-color: white;
}
.input{
float: left;
margin: 15px;
}
.btn {
display: inline-block;
float: left;
padding: 10px;
background-color: rgb(253, 253, 250);
border: 2px solid rgb(247, 247, 153);
border: 2px solid rgb(196, 195, 195);
border-radius: 4px;
height: 55px;
}
.btn:hover{
@ -33,26 +35,68 @@
}
.container {
display: flex;
margin: 10px;
float: left;
padding-top: 15px;
width: 400px;
}
.color_element {
display: flex;
text-align: center;
flex-direction: column;
float: left;
margin: 0px 5px;
width: 50px;
border-radius: 2px;
}
.color_button{
width: 50px;
height: 27px;
border-radius: 2px;
}
.del_btn{
height: 27px;
background-color: white;
border: none;
}
.icon {
font-size:30px;
}
.main {
margin: 15px;
}
.del{
opacity: 0;
font-size: 20px;
}
.del:hover{
opacity: 1;
}
</style>
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
-->
</head>
<body>
<table class="table" id="qq"></table>
<div class="container">
container
<div class = "main">
<input class = "input" type="color" id="palitra">
<button class="btn">Кнопка</button>
<button class="btn" onclick="add_color()" id="btn"><i class="bi bi-plus-circle icon"></i></button>
<div class="container" id="container"></div>
</div>
<script src="main.js"></script>
</body>
</html>

69
main.js
View File

@ -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;
}
}