Solution for "Pricing-component-with-toggle" using html/css/js

Community feedback

• Account deleted

  Hi, nice one on the solution, it looks pretty good, but...;

  • On your css there's unnecessary repetition. If elements are going to share the same styling, you might as well sum them up.

  
  .professional-section .storage-p {
    text-align: center;
    color: hsl(0, 0%, 100%);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 5% 0;
    width: 90%;
    margin: 0 auto;
    border-top: 0.01rem solid hsla(0, 0%, 100%, 0.5);
    border-bottom: 0.01rem solid hsla(0, 0%, 100%, 0.5);
  }
  
  .professional-section .users-p {
    text-align: center;
    color: hsl(0, 0%, 100%);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 5% 0;
    width: 90%;
    margin: 0 auto;
    border-bottom: 0.01rem solid hsla(0, 0%, 100%, 0.5);
  }
  
  .professional-section .datacap-p {
    text-align: center;
    color: hsl(0, 0%, 100%);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 5% 0;
    width: 90%;
    margin: 0 auto;
    border-bottom: 0.01rem solid hsla(0, 0%, 100%, 0.5);
  }
  
  

  • On the above css you should have just gave the elements the same class and you would have only had to write the styling only once.

  There's a lot of other repetitions, next time you should try to avoid repeating your self.

  Keep coding👍.

  Marked as helpful

  1

  ---

  

  Yousef Khalid•580

  @YousefKhalid-iqPosted about 3 years ago

  @thulanigamtee Thanks for the feedback, I'll edit the code right away :)

  edit: wow I almost shortened the CSS file by 200 lines, thanks for the advice I'll keep an eye out for repetition in my code from now on :)

  0