JavaScript JavaScript Loops, Arrays and Objects Simplify Repetitive Tasks with Loops For Loops

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
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

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!