I have been struggling with dom manipulations in a sorting visualizer game I am developing using Vanilla JS and HTML/CSS3. Specifically, I am having difficulty implementing color changes for each div at a particular time interval of 500ms. How can I successfully change the color of each division within this specified time frame?
<body>
<div class="color">Division 1</div>
<div class="color">Division 2</div>
<div class="color">Division 3</div>
<div class="color">Division 4</div>
<div class="color">Division 5</div>
</body>
<script>
var color = document.querySelectorAll(".color");
console.log(color[0]);
setTimeout(change, 3000);
function change() {
color[0].style.background = "green";
}
</script>
<style>
div {
height: 100px;
width: 100px;
border: 1px solid black;
overflow: hidden;
background-color: aqua;
}
</style>