Article Preview Component - HTML / CSS / JS

Community feedback

• 

  Grego•1,310

  @Grego14Posted 7 months ago

  Hello! I have been reading your JavaScript code and here are some recommendations:

  Try not to add too many styles using JavaScript, rather add a class and then manage the styles in your stylesheet.

  Here an example:

  if (socialBar.classList.contains('hide')) {
    socialBar.classList.remove('hide')
  } else {
    socialBar.classList.add('hide')
   }
  }
  

  In this case, the hide class in the socialBar element is responsible for making the element display: none

  #socialBar{
    display: flex;
  }
  
  #socialBar.hide{ 
    display: none;
  }
  

  And this way you avoid checking if style.display is display none or not.

  You can also use media queries in your CSS to avoid adding some styles in the JavaScript.

  You can also do the same with the other elements.

  If you need the same padding everywhere except the bottom one:

  .right-col-top-container {
    padding: 30px;
    padding-bottom: 20px
  }
  

  I hope this helps!

  Marked as helpful

  0

  ---

  

  BT738844•680

  @BT453567Posted 7 months ago

  Thanks @Grego14 for your feedback.

  What is the reason to not add remove styles from JS script and use classList?

  Is it bad for performance?

  0

  

  Grego•1,310

  @Grego14Posted 7 months ago

  @BT453567

  No, it doesn't affect performance unless you make a value change too many times in a short time.

  But it is easier to maintain if you add the styles in your stylesheet.

  And it is also easier to remove a class that contains many styles than to remove the styles one by one using javascript.

  1

  

  BT738844•680

  @BT453567Posted 7 months ago

  Hello @Grego14, I have now updated my solution with the changes you recommended Thanks

  1