Interactive rating component

Community feedback

• 

  Andrew•380

  @andreich1980Posted over 2 years ago

  Hey Dania

  You got the error you mentioned in your script.js file because you imported it twice: the first time in the head and then in the end of the body.

  I like that you make the ratings and "submit" - buttons. Some people here make those as divs, but since we click on them, they should be buttons. Good job. And I like that you used transitions for hover states, so the changes are smooth and nice. ♥

  Also, having buttons with class button isn't helpful for those who read your code, you might call the class rating or rating-button or something like this. I'm not even sure if you use this .button class anywhere. You style rating buttons via .buttons button. UPD: Oh, you use .button in JS, so it's okay. Just might rename the class to something more readable.

  You declared .finished class as just display: none and then you override this later in the same css file to display: flex. And you never use any of them, you set display property in JS via style.

  Your .buttons class has cursor: pointer. What is the point of this if buttons usually have cursor as a pointer by default. With that setting cursor turns into a pointer even if I hover on an empty space between rating buttons. Same think with cursor: pointer on submit button, I think you don't need it.

  Also you forgot your debugging console.logs :)

  Good job

  Marked as helpful

  1

  ---

  

  dania•530

  @adimidaniaPosted over 2 years ago

  @andreich1980 thanks a lot Andrew for all your remarks, I really appreciate it!! I will make sure to work on every aspect you just mentioned, thanks again ♥

  1
• Account deleted

  Great Job for your work! :)

  for the style, always used (rem) instead (px) only for this kind of property such as margin, padding and font-size

  for the script, never used var syntax always used const and let, first you should know the difference between them before you used const & let if you know that it will help you tremendously in javascript when you encounter a bug or error

  Marked as helpful

  1

  ---

  

  dania•530

  @adimidaniaPosted over 2 years ago

  @okayda Thanks a lot Jhon for your valuable feedback, I will take it into consideration! For the javascript thing, I will do my best to learn it from scratch this time. Thanks again!

  1
• 

  Matt Seidel•570

  @mseidel819Posted over 2 years ago

  This looks great!

  1. The hover effect on the number buttons should be orange. easy fix :)

  2. There may be an issue with your <img> component towards the bottom of your html file. try adding a /> to the end of it, instead of just a >. your issue report says u> <h3 id=selected-result></h3>`.... I think that's what the issue is.

  3. try changing <div class="card"> to <main class="card"> to fix an accessibility issue.

  Marked as helpful

  1

  ---

  

  dania•530

  @adimidaniaPosted over 2 years ago

  @mseidel819 thanks a lot I really appreciate it! I will do sooo

  1