Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Loops Working with 'for' Loops The Refactor Challenge – Duplicate Code

Posted by Joshua Moten
Joshua Moten
2,403 Points

Sharing: Loop Exercise

let html = '';
let red;
let green;
let blue;
let randomRGB;

function changeColor() {
    red = Math.floor(Math.random() * 256);
    green = Math.floor(Math.random() * 256);
    blue = Math.floor(Math.random() * 256);
    return randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
}

for(let color = 1; color <=10; color++){
  changeColor()
  html += `<div style="background-color: ${randomRGB}">${color}</div>`;
}


document.querySelector('main').innerHTML = html;
//red = Math.floor(Math.random() * 256);
//green = Math.floor(Math.random() * 256);
//blue = Math.floor(Math.random() * 256);
//randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
//html += `<div style="background-color: ${randomRGB}">1</div>`;
//
//red = Math.floor(Math.random() * 256);
//green = Math.floor(Math.random() * 256);
//blue = Math.floor(Math.random() * 256);
//randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
//html += `<div style="background-color: ${randomRGB}">2</div>`;
//
//red = Math.floor(Math.random() * 256);
//green = Math.floor(Math.random() * 256);
//blue = Math.floor(Math.random() * 256);
//randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
//html += `<div style="background-color: ${randomRGB}">3</div>`;
//
//red = Math.floor(Math.random() * 256);
//green = Math.floor(Math.random() * 256);
//blue = Math.floor(Math.random() * 256);
//randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
//html += `<div style="background-color: ${randomRGB}">4</div>`;
//
//red = Math.floor(Math.random() * 256);
//green = Math.floor(Math.random() * 256);
//blue = Math.floor(Math.random() * 256);
//randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
//html += `<div style="background-color: ${randomRGB}">5</div>`;
//
//red = Math.floor(Math.random() * 256);
//green = Math.floor(Math.random() * 256);
//blue = Math.floor(Math.random() * 256);
//randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
//html += `<div style="background-color: ${randomRGB}">6</div>`;
//
//red = Math.floor(Math.random() * 256);
//green = Math.floor(Math.random() * 256);
//blue = Math.floor(Math.random() * 256);
//randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
//html += `<div style="background-color: ${randomRGB}">7</div>`;
//
//red = Math.floor(Math.random() * 256);
//green = Math.floor(Math.random() * 256);
//blue = Math.floor(Math.random() * 256);
//randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
//html += `<div style="background-color: ${randomRGB}">8</div>`;
//
//red = Math.floor(Math.random() * 256);
//green = Math.floor(Math.random() * 256);
//blue = Math.floor(Math.random() * 256);
//randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
//html += `<div style="background-color: ${randomRGB}">9</div>`;
//
//red = Math.floor(Math.random() * 256);
//green = Math.floor(Math.random() * 256);
//blue = Math.floor(Math.random() * 256);
//randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
//html += `<div style="background-color: ${randomRGB}">10</div>`;

How did I do? After watching the video I was like dang I thought about an anonymous function

1 Answer

Rachel Johnson
STAFF
Rachel Johnson
Treehouse Teacher
Rachel Johnson
Rachel Johnson
Treehouse Teacher

Hey Joshua Moten , thanks for sharing your solution!

I think this is definitely a great solution. Look how many lines of code you were able to comment out!

Something else that you could also do from here is to have a look to see if there are any more repeated or super similar lines of code. For example, these three:

red = Math.floor(Math.random() * 256);
green = Math.floor(Math.random() * 256);
blue = Math.floor(Math.random() * 256);

The only real difference here are the names of each variable, right? In this case, we can create yet another function that handles the Math.floor(Math.random() * 256) part of each line, so we can cut down on even more code.

Regardless, you did great! :D

Joshua Moten
Joshua Moten
2,403 Points

Thanks I saw that in the video with the anonymous function and was like..."You should of just did that way" lol