Christopher Gardner
12,347 PointsCSS 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
Brendan Whiting
Front End Web Development Techdegree Graduate 84,586 PointsI 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
adricg
8,078 PointsYou 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.
Christopher Gardner
12,347 PointsAwesome, thank you!
Christopher Gardner
12,347 PointsChristopher Gardner
12,347 PointsMainly just playing around with it. Was giving myself a refresher on grid. Thanks for the answer though!