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 Basics (Retired) Working With Numbers The Random Challenge

Peter Retvari
seal-mask
.a{fill-rule:evenodd;}techdegree
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 Points

How can I style Javascript with CSS?

HI guys, I solved the challenge, however I would like to ask a mate, who has more experience about "styling Javascript. I know how can I style HTML with CSS (class, selectors..), but nothing about JS. Let say I would like to style the pop-up window or create more margin between the document.write methods. Which is the easiest way to do it?

Here you can find my code inside collectRandom.js:

https://w.trhou.se/w28hl87dpf

Thanks in advance

3 Answers

Cooper Runstein
Cooper Runstein
11,850 Points

You can't directly alter the appearance of alerts with vanilla CSS, but you can find way to do this with JQuery or more robust CSS libraries (I think Bootstrap allows for custom alerts). This is probably a little advanced for your current project, my recommendation would be to take the DOM manipulation course as was suggested above, document.write is an easy way to get things on the screen, but it's not how most JS is added to html. After you master the DOM course, JQuery is another great way to add elements to the DOM, it's also widely used to manipulate classes and styles of elements in your html. Appending elements to the DOM will allow you to use selectors much easier, however I believe you can add a class to your document.write statement if you really want to:

.addedStyle{
   color: red;
   padding-top: 5px;
}
document.write("<p class="addedStyle"> Kis cuuki <3</p>");
Adam Beer
Adam Beer
11,314 Points

I don't know how you can be changed the pop-up and document.write window. This is a good question. I'm curious about that too. I never thought I'd change these. You can change anything but I think you can not change the built-in elements. Btw check later this course. This is the DOM Manipulation. "Hajrá! Ha esetleg kell, van összeszedett anyagom, milyen sorrendben érdemes haladni". Good evening!

Peter Retvari
seal-mask
.a{fill-rule:evenodd;}techdegree
Peter Retvari
Full Stack JavaScript Techdegree Student 8,392 Points

Thanks Adam for the quick answer. You're always here to help :) I owe you a beer :) :) Koszi szepen az anyagot. En most a Techdegree-t kezdtem el, mert tenyleg szeretnek ezzel foglalkozni a jovoben. Elvileg az egy adott tracken visz vegig (leg. is remelem). De ettol fuggetlenul barmilyen jegyzetet, tanacsot nagyon szivesen elfogadok .