interactive rating component with js

Community feedback

• Account deleted

  Hey 👋,

  Great work on this challenge. Your solution is both responsive and interactive, good job! To optimize your CSS you can work on refactoring some of the repetitive properties into individual classes. For example -

  .container {
      background-color: var(--Very-Dark-Blue);
      height: 100vh;
      width: 100vw;
      /*============Repeated below============*/
      display: flex;
      justify-content: center;
      align-items: center;
      display: -webkit-flex;
      -webkit-box-align: center;
      -webkit-box-pack: center;
      display: -ms-flexbox;
      -ms-flex-align: center;
      -ms-flex-pack: center;
      /*======================================*/
  }
  
  .icon-star {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      /*===========Repeated above=============*/
      display: flex;
      justify-content: center;
      align-items: center;
      display: -webkit-flex;
      -webkit-box-align: center;
      -webkit-box-pack: center;
      display: -ms-flexbox;
      -ms-flex-align: center;
      -ms-flex-pack: center;
      /*======================================*/
      /*same card color with less opacity*/
      background-color: var(--rating-buttons-bgc);
      padding: 1.2rem;
  }
  

  You could instead separate those properties into a seperate class

  .center{
      display: flex;
      justify-content: center;
      align-items: center;
      display: -webkit-flex;
      -webkit-box-align: center;
      -webkit-box-pack: center;
      display: -ms-flexbox;
      -ms-flex-align: center;
      -ms-flex-pack: center;
  }
  

  And give this class to elements that need it.

  <div class="icon-star mar-bottom center">
    <img src="./images/icon-star.svg" alt="">
  </div>
  

  Marked as helpful

  0

  ---

  

  Muazzam•180

  @MuazzyPosted over 2 years ago

  @ktra99 Thanks for the feedback, i really appreciate it. I have refactored the code as you suggested!

  1