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

Christopher Gardner
Christopher Gardner
12,347 Points
Posted by Christopher Gardner
Christopher Gardner
12,347 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
MOD
Brendan Whiting
Front End Web Development Treehouse Moderator 84,061 Points
Brendan Whiting
Brendan Whiting
Front End Web Development Treehouse Moderator 84,061 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,347 Points
Christopher Gardner
Christopher Gardner
12,347 Points

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