I want divs with circles to be created and appear on my page
I made a create function where I randomly choose a color and add a circle class which gives the shape of a circle
But now I have them all created together, and the quantity is what I indicate
How can I make these divs create themselves, let's say every 3 seconds, and the number of them on the page is almost unlimited?
function createDiv(id, color) {
let div = document.createElement('div');
div.setAttribute('id', id);
if (color === undefined) {
let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
div.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
}
else {
div.style.backgroundColor = color;
}
div.classList.add("circle");
document.body.appendChild(div);
}
createDiv('first');
createDiv('second');
createDiv('third');
createDiv('fourth');
createDiv('fifth');
createDiv('sixth');
createDiv('seventh');
createDiv('eighth');
createDiv('ninth');
createDiv('tenth');
createDiv('eleventh');
createDiv('twelfth');div {
display: inline-block;
margin: 20px;
}
.circle {
clip-path: circle(50%);
height: 50px;
width: 50px;
margin: 20px;
}You can use setInterval as mentioned, but you need to make sure to clear the interval as well clearInterval(createWithTimer); otherwise you will end up with an infinite loop.
To avoid possible repetition of colors, you can splice the current value colors.splice(circleCounter,1) in each loop from the colors array. If you don't know how many circles you will/want to create you can specify the amount and create a 6 digit hex value on the fly: hex => [...Array(6)].map(() => Math.floor(Math.random() * 16).toString(16)).join('');
If you want to reuse this snippet, you simply wrap it in a function and call it when needed: generateCircles(10, 1000); with the 1st parameter being the amount of circles you want and the 2nd parameter the interval time between the creation of each circle.
You can also probably set the background as follow:
div.style.backgroundColor = color || colors[randomNumber];
function createDiv(id, color) {
const div = document.createElement('div'),
createHex = hex => [...Array(6)].map(() => Math.floor(Math.random() * 16).toString(16)).join('');
div.id = `circle-${id+1}`;
div.className += "circle";
div.style.backgroundColor = color || `#${createHex()}`,
document.body.appendChild(div);
}
function generateCircles(amountofCircles, interValTimer){
let circleCounter = 0;
let createWithTimer = setInterval(()=>{
if(circleCounter >= amountofCircles)
clearInterval(createWithTimer);
else
createDiv(circleCounter);
circleCounter++;
}, interValTimer);
}
generateCircles(10, 1000);div {
display: inline-block;
margin: 20px;
}
.circle {
clip-path: circle(50%);
height: 50px;
width: 50px;
margin: 20px;
}You can leverage setInterval to run the script every three seconds. Since your id is required, the function I'm running every three seconds below also iterates an i var to leverage and keep unique ids:
function createDiv(id, color) {
let div = document.createElement('div');
div.setAttribute('id', id);
if (color === undefined) {
let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
div.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
}
else {
div.style.backgroundColor = color;
}
div.classList.add("circle");
document.body.appendChild(div);
}
let i = 0;
const threeSeconds = 3000;
setInterval(() => {
i += 1;
createDiv(`div-${i}`)
}, threeSeconds);div {
display: inline-block;
margin: 20px;
}
.circle {
clip-path: circle(50%);
height: 50px;
width: 50px;
margin: 20px;
}You can do it with only one line of code in your JavaScript file, by using setIterval timer, and Date.now() to generate unique id each time:
setInterval(() => createDiv(Date.now()), 3000);
Working example:
function createDiv(id, color) {
let div = document.createElement('div');
div.setAttribute('id', id);
if (color === undefined) {
let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
div.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
}
else {
div.style.backgroundColor = color;
}
div.classList.add("circle");
document.body.appendChild(div);
}
setInterval(() => createDiv(Date.now()), 3000);div {
display: inline-block;
margin: 20px;
}
.circle {
clip-path: circle(50%);
height: 50px;
width: 50px;
margin: 20px;
}