Recently, I developed a function that generates random divs containing circles.
The function randomly selects a border color for each circle, and this feature is functioning correctly.
To enhance the appearance, I decided to add a box shadow to the circles. However, I encountered an error while trying to implement a random color selection for the box shadow:
"message": "Uncaught SyntaxError: Invalid or unexpected token"
I would appreciate some guidance on how to properly assign a random color to the box shadow.
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.borderColor = colors[Math.floor(Math.random() * colors.length)];
div.style.boxShadow = '0px 0px 15px 5px' + colors[Math.floor(Math.random() * colors.length)];
}
else {
div.style.borderColor = color;
div.style.boxShadow = '0px 0px 15px 5px' + color;
}
div.classList.add("circle");
document.body.appendChild(div);
}
let i = 0;
const oneSeconds = 1000;
setInterval(() => {
i += 1;
createDiv(`div-${i}`)
}, oneSeconds);div {
display: inline-block;
margin: 20px;
}
.circle {
width: 80px;
height: 80px;
border-radius: 80px;
background-color: #ffffff;
border: 3px solid #000;
box-shadow: 0px 0px 15px 5px #0ff;
margin: 20px;
}