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 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,738 Points
Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 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!