1
\$\begingroup\$

For a class that I'm in, we're creating digital Pokemon cards. I'm trying to create elements that are nested within another element and repeated multiple times. For example, I have currently:

<div class="columns">
<div class="column">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
</div>

But, I only want 3 of the box divs to be inside the column div and then for this model to repeat for every 3 box divs so that it looks like this:

<div class="columns">
<div class="column">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
</div>
<div class="columns">
<div class="column">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
</div>
<div class="columns">
<div class="column">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
</div>

And I want that to repeat until all of the box divs are filled into a column div.

The javascript that I used to make these divs is the following:

function createPokeCard(pokeData) {
  let scene = document.createElement('div')
  let card = document.createElement('div')

  scene.className = 'scene'
  card.className = 'box'

card.addEventListener( 'click', function() {
  card.classList.toggle('is-flipped')
})

  card.appendChild(cardFront(pokeData))
  card.appendChild(cardBack(pokeData))
  mainContainer.appendChild(card)
  mainContainer.appendChild(section)
  mainContainer.appendChild(columns)
  mainContainer.appendChild(column)
  section.appendChild(columns)
  columns.appendChild(column)
  columns.appendChild(card)
  column.appendChild(card)
}

Can you review this code for best coding practices?

\$\endgroup\$

closed as off-topic by πάντα ῥεῖ, 200_success, Vogel612 Apr 10 at 10:42

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – 200_success, Vogel612
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    \$\begingroup\$ Don't alter the HTML to suit your layout. Layout should be done using CSS. \$\endgroup\$ – 200_success Apr 5 at 19:33
  • \$\begingroup\$ Sorry, can you explain a bit more in depth what you mean? I don't quite understand. \$\endgroup\$ – user196981 Apr 5 at 20:28
  • \$\begingroup\$ What @200_success means, is that you don't need to use JavaScript to reorder the HTML to create columns, instead you can use CSS, for example grid layout. How exactly depends on how you want it too look. Also, even if you don't want to use CSS, why aren't you generating the original HTML with the separate columns? \$\endgroup\$ – RoToRa Apr 8 at 11:09
  • \$\begingroup\$ Right, I know that I can use HTML and CSS instead of the Javascript, but I will be having a button that can generate new content using the Javascript, and I want those new elements to fall under that sam structure. Can I do that with only HTML and CSS? Also, if I were to use HTML and CSS then I would still need to assign that HTML and CSS to the javascript content that I am generating from an API so they would still need to be linked somehow. \$\endgroup\$ – user196981 Apr 8 at 22:23
  • \$\begingroup\$ Welcome to Code Review! I'm afraid this question does not match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information. \$\endgroup\$ – Vogel612 Apr 10 at 10:42