height,width,save btn

This commit is contained in:
chubby 2021-11-29 17:21:44 +03:00
parent 83abbc6023
commit 4413632716
2 changed files with 40 additions and 3 deletions

View File

@ -78,6 +78,20 @@
.del:hover{ .del:hover{
opacity: 1; opacity: 1;
} }
.HW{
margin-bottom: 15px;
}
.HW:focus {
background-color: #e4f0f5;
}
.save_btn{
margin: 15px;
padding: 5px;
border-radius: 4px;
}
.save_btn:hover{
background-color: yellow;
}
</style> </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"> -->
@ -87,6 +101,9 @@
</head> </head>
<body> <body>
<input type="number" class="HW" id="H" oninput= "q()" value="20">
<input type="number" class="HW" id="W" oninput= "q()" value="20">
<button class="save_btn ">Сохранить</button>
<table class="table" id="qq"></table> <table class="table" id="qq"></table>
<div class = "main"> <div class = "main">
@ -94,8 +111,11 @@
<button class="btn" onclick="add_color()" id="btn"><i class="bi bi-plus-circle icon"></i></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 class="container" id="container"></div>
</div> </div>
<div id="add_div"></div>
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>

21
main.js
View File

@ -3,9 +3,19 @@ let elem = document.getElementById('qq');
let a_click = false 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){ function createTable (parent, cols, rows){
console.log(rows,cols)
while ( parent.firstChild){
parent.firstChild.remove()
}
document.onmousedown = function(){ document.onmousedown = function(){
a_click = true a_click = true
} }
@ -16,6 +26,7 @@ document.onmouseup = function(){
let palitra = document.getElementById('palitra'); let palitra = document.getElementById('palitra');
for ( i=0; i<rows; i++){ for ( i=0; i<rows; i++){
let tr=document.createElement('tr') let tr=document.createElement('tr')
@ -39,9 +50,11 @@ let palitra = document.getElementById('palitra');
parent.append(tr) parent.append(tr)
} }
} }
createTable (elem, 20, 20)
function add_color(){ function add_color(){
@ -105,3 +118,7 @@ function rgbToHex(col)
} }
} }
function picture(){
let d = element("div")
document.getElementById("add_div").append.d
}