im suposed to make one of those circles or squares that randomly change color but all its doing is constantly reloading i tryed changeing 'px' to ('px') but it only works with '10px' or '20px'and still wont show.
function showPattern(){
const colorArray= ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
let topPosition = 25;
let leftPosition = 25;
let width = 500;
let height = 500;
while(width > 50){
const randomColorIdx = Math.floor(Math.random() * colorArray.length);
const newDiv = document.createElement("div");
newDiv.style.top = topPosition + 'px';
newDiv.style.left = leftPosition + 'px';
newDiv.style.width = width +'px';
newDiv.style.height = height + 'px';
newDiv.style.background = colorsArr[randomColorIdx];
document.body.appendChild(newDiv);
topPosition += 10;
leftPosition += 10;
width -= 20;
height -= 20;
}
}
(heres the html and css)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="refresh" content="1" />
<title>Colorful Patterns DOM Project</title>
<style>
div {
position: absolute;
border-radius: rounded_corner;
}
</style>
</head>
<body onload="showPattern()">
<script src="js/dom-patterens.js"></script>
</body>
</html>
Comments
Post a Comment