Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript Loops, Arrays and Objects Simplify Repetitive Tasks with Loops The Refactor Challenge, Part 2

Christopher Gardner
Christopher Gardner
12,719 Points
Posted by Christopher Gardner
Christopher Gardner
12,719 Points

CSS Grid/JavaScript

So, I'm trying to play around with CSS Grid with the random color generator. I'm trying to produce the colors, put them into cubes and place them in a CSS Grid. However, I can't seem to figure out how I can place my random cubes into the container.

https://codepen.io/chrisgdesigns/pen/NoVQmd

Thanks!

2 Answers

adricg
adricg
8,078 Points
adricg
adricg
8,078 Points

You should take the 'JavaScript and Dom ' course. It talks about grabbing an element like your container div and adding elements to it. You learn about getElementById and other functions to grab elements. Then you learn about createElement and appending functions. All functions and methods you will need to do what you want to do here.

Hope that helps.

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,677 Points
Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,677 Points

I haven't dug too deep into the code to give you a thorough answer. But I see that you only have one html container element, there is nothing else there in the html, everything else is CSS and JavaScript. It's probably a better idea to create your cubes in HTML, use CSS to style their size and location, and JavaScript to assign random colors to the classes you put on those cubes in your HTML. Also, what is the purpose of CSS grid here? If you want a kind of bento-box design, CSS grid can be awesome, but if you just want basic cubes in columns and rows, you don't need CSS grid.

There's a great guide on CSS grid here

Christopher Gardner
Christopher Gardner
12,719 Points
Christopher Gardner
Christopher Gardner
12,719 Points

Mainly just playing around with it. Was giving myself a refresher on grid. Thanks for the answer though!