Interactive rating component

Community feedback

• 

  Volkan Guneri•170

  @volkanguneriPosted almost 2 years ago

  Awesome!

  I can suggest you in CSS

  1-

  background-image: url('images/icon-star.svg') center center / cover no repeat;

  instead of

  background-image: url(images/icon-star.svg); background-repeat: no-repeat; background-position: center;

  2-

  use of rem and em instead of pixels

  3-

  u can also use css :active proporty instead of javascript here by adding tabindex="1" to your "li" in HTML.

  li:active { color: hsl(0, 0%, 100%); background-color: hsl(217, 12%, 63%); }

  instead of creating a new css class

  .selected { color: hsl(0, 0%, 100%); background-color: hsl(217, 12%, 63%); }

  4- you can also manipulate css directly by javascript DOM instead of creating a new css class like

  .display-not { display: none; }

  main.style.display = 'none'; section.style.display = 'block';

  I hope that it can make more economy.

  I also learned from your javascript code.

  Thanks

  0