Merhaba şöyle bir kodum var ve ben her 30 saniyede bir açılan butondan renk seçmek istiyorum.
butona tıkladığımda bir renk paleti açılıyor ve renk paletinden herhangi bir renk seçtiğim an 30 saniyenin başlamasını ve 30 saniye içinde renk değiştirememesini istiyorum ve 30 saniye içinde bir kere boyayabilmesini istiyorum tuvali. rplace gibi. Saniye vs. ayarladım ama kullanıcı rengi seçtikten sonra istediği kadar boyuyabiliyor (rengi seçtiğinde “getcolor” a seçtiği rengi class’ını atıyorum getcolor’un classı’da seçtiği kareye atanıyor burada sanırım getcolor’un class’ını silebilmem lazım ama beceremedim)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyPlace</title>
<!-- Style -->
<link rel="stylesheet" href="style.css">
<!-- FONT AWESOME -->
<script src="https://kit.fontawesome.com/ad715522f0.js" crossorigin="anonymous"></script>
</head>
<body>
<h1>MyPlace</h1>
<div class="select-color">
<div class="open-colors">
OpenColors
</div>
</div>
<div class="container">
<div class="boxs">
</div>
</div>
<div class="maincolor">
<ul class="colorselect">
<li><div class="colors color1" id=""></div></li>
<li><div class="colors color2" id=""></div></li>
<li><div class="colors color3" id=""></div></li>
<li><div class="colors color4" id=""></div></li>
<li><div class="colors color5" id=""></div></li>
<li><div class="colors color6" id=""></div></li>
<li><div class="colors color7" id=""></div></li>
<li><div class="color color8" id=""></div></li>
<li><div class="colors color9" id=""></div></li>
<li><div class="colors color10" id=""></div></li>
<li><div class="colors color11" id=""></div></li>
<li><div class="colors color12" id=""></div></li>
<li><div class="colors color13" id=""></div></li>
<li><div class="colors color14" id=""></div></li>
<li><div class="colors color15" id=""></div></li>
<li><div class="colors color16" id=""></div></li>
<li><div class="colors color17" id=""></div></li>
<li><div class="colors color18" id=""></div></li>
<li><div class="colors color19" id=""></div></li>
<li><div class="colors color20" id=""></div></li>
<li><div class="colors color21" id=""></div></li>
<li><div class="colors color22" id=""></div></li>
<li><div class="colors color23" id=""></div></li>
<li><div class="colors color24" id=""></div></li>
</ul>
<div class="ok-none">
<div class="ok-none-btn" id="ok-btn"><i class="fa-solid fa-check"></i></div>
<div class="ok-none-btn" id="none-btn"><i class="fa-solid fa-xmark"></i></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
JAVASCRİPT
const boxs = document.querySelector('.boxs');
const opencolors = document.querySelector('.open-colors');
const maincolor = document.querySelector('.maincolor');
const colors = document.querySelectorAll('.colors');
const boxstyle = document.querySelectorAll('.boxstyle')
let getcolor
let idSelect
function EvenetListeners(){
opencolors.addEventListener("click",opencolor);
}
for(var i = 0; i<3010; ++i){
var link = document.createElement("a");
link.innerHTML = "▉"
link.id = "btn";
link.id += i;
link.classList = "boxstyle"
boxs.appendChild(link);
link.addEventListener("click", clickFunc)
}
// renge tıklanınca kapatma ve renk id alma
colors.forEach(element => {
element.onclick = function(){
maincolor.style.display ="none";
opencolors.style.display ="none";
// 30 saniye sonra buton açılması
setTimeout(function(){
opencolors.style.display = "block";
},30000)
getcolor = element.classList[1];
console.log(getcolor);
}
});
function clickFunc(e){
idSelect = e.target;
idSelect.classList.add(getcolor);
console.log(idSelect.classList);
}
// Renk paleti açma
function opencolor (){
if(maincolor.style.display === "none"){
maincolor.style.display = "block";
}
else{
maincolor.style.display = "none";
}
}
EvenetListeners()