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, Arrays and Objects Simplify Repetitive Tasks with Loops For Loops

Don Miller
Don Miller
3,582 Points
Posted by Don Miller
Don Miller
3,582 Points

Where did the grey circles come from?

Within these JavaScript tutorials, we've been running document.write(); for some time now. I'm focusing on the for loop presentation and then wham !! All prior lessons w/ numbers written weren't in circles, but this video shows all of our numbers written are in circles !! Like what in the world is happening.

Is this because the tutor added a "stylesheet" from the css file? I'm not asking for a full explanation. Just like how are the grey circles coming into play.

It seems like after each lesson, I think to myself "omg, I have to learn HTML or PHP or xxx". Do I have to add CSS to my list? Lol

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Circles</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body id="color">
  <script src="js/for_loops.js"></script>
</body>
</html>

1 Answer

Ruben Ponce
seal-mask
.a{fill-rule:evenodd;}techdegree
Ruben Ponce
Full Stack JavaScript Techdegree Student 12,035 Points
Ruben Ponce
.a{fill-rule:evenodd;}techdegree
Ruben Ponce
Full Stack JavaScript Techdegree Student 12,035 Points

That's the CSS styling on the div. If you look inside styles.css, you'll see what targets it and gives it the grey color, and circular properties under css \#color div {box-sizing: border-box;padding-top: 12px;text-align: center;width: 50px; height: 50px; display: inline-block;border-radius: 50%;margin: 5px; background-color: rgb(230,230,230);}

You'll likely encounter css selectors and adding styles throughout JavaScript, so I'd suggest taking a couple tracks here in HTML and CSS to get a better understanding of how JavaScript interacts with the webpage.

Edit: jeez the formatting for CSS is not really working properly

Don Miller
Don Miller
3,582 Points
Don Miller
Don Miller
3,582 Points

Ah, ok. I will do as you suggest and pop over to CSS & HTML and watch some beginner courses over there right now. Thanks for your time & explanation!