JavaScript JavaScript Loops, Arrays and Objects Simplify Repetitive Tasks with Loops The Refactor Challenge, Part 2

Otec Perez Glass
Otec Perez Glass
7,678 Points

The Refactor Challenge, Part 2

Heloo

// this is how i did it
    var html = '  ';
    var rgbColor;
    var flag = true;

    function Reload(){location.reload();}

    function repeatedCode(){return Math.floor(Math.random() * 256 );}

    var otec = function(){
    rgbColor = 'rgb(' + repeatedCode() + ',' + repeatedCode() + ',' + repeatedCode() + ')';
    html += '<div style="background-color:' + rgbColor + '"></div>';
     }

    for (var x =1; x <=10 ;x++){
    otec(); 
    if (x == 10){
      flag = false;
     }
    }
    document.write(html);
    Reload();

I was wondering if i can find a way of making a delay and changing the different colors without reloading the entire page.

Aurelian Spodarec
Aurelian Spodarec
10,785 Points

Wrap your code around

/```javascript

/```

Without brackets.

No one will help you that way, can't see the code.

Otec Perez Glass
Otec Perez Glass
7,678 Points

Aurelian Spodarec Thanks the suggestion

2 Answers

Hi Otec Perez Glass

Yes you can! you can use the SetInterval function in JavaScript. Here is an example on how to use it:

var x = document.body;
var color = ["blue", "green", "yellow", "red"];
setInterval(function() {
   for(let y = 0; y < 4; y++){
    x.style.backgroundColor = color[Math.floor(Math.random() * 3)];  
  }
}, 500) ;

This example shows how to change the color on the body element, you can change this to be your divs. what we do is create an array of colors, then use the setInterval function to loop through the element we want to change. This is a basic example, but you can change it as your like. when you start using array methods please feel free to update this code as your progress.

Otec Perez Glass
Otec Perez Glass
7,678 Points

Hey thanks! for the help, for sure will do.

No problem! If you have any questions please feel free to ask.

Otec Perez Glass
Otec Perez Glass
7,678 Points

I finally got it. Jacob Mishkin

let  html = '';
let Arrays = ['A','B','C','D'];
let Color = ['Lightgrey','Lightgreen','coral','purple'];

let random = () =>   Math.floor(Math.random() * 4 );

let print = message => {
  let bodyID = document.getElementById('color');
  bodyID.innerHTML = message;
}

for (let x = 0; x < Arrays.length; x++){

   html +=  `<div class = ${Arrays[x]}></div>`;
}


// Create the Divs Random Colors
setInterval(() => {

for (let x = 0; x  <  Arrays.length;  x++){

let divColorControl  =  document.querySelector(` div.${Arrays[x]} `);
divColorControl.style.backgroundColor  =  Color[ random() ]
}
}, 1000)


print(html);

Thanks for the advice!

Awesome!!