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 Becky Hirsch
Becky Hirsch
14,069 Points

My solution

I did something similar to what Guil did originally but I found something pretty cool in a Google search. It uses hexadecimal colors. 

let html = '';

for (let i=1; i <= 10; i++) {
  var randomColor = Math.floor(Math.random()*16777215).toString(16);
  html += `<div class="circle" style="background-color: #${randomColor}"><span>${i}</span></div>`;
}

document.getElementById('color-set').innerHTML = html;

Source: https://dev.to/akhil_001/generating-random-color-with-single-line-of-js-code-fhj The HTML is different because I grabbed it from my codepen: https://codepen.io/Bekahlew/pen/rNMJBxy

Becky Hirsch
Becky Hirsch
14,069 Points

Thank you Jonathan! I gave that a try and see the hex changing. It's cool to see it in action! I'm a big fan of using console.log() for debugging. It's like playing detective and seeing each step is a different clue. :)

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Looks great! Well done! :)

I looked at the codepen and had a look at the way the Math.floor() and Math.random() function work together by passing randomColor to console.log() like this

var randomColor = Math.floor(Math.random()*16777215).toString(16);
  html += `<div class="circle" style="background-color: #${randomColor}"><span>${i}</span></div>`;
}
console.log("#"+randomColor);

Try it yourself See what hexadecimal number comes out. console.log() is a good way to debug and/or see if your program is working as expected.