Interactive ccomponent

Community feedback

• 

  Kartar Developer•360

  @kartardeveloperPosted about 2 years ago

  Hi Chizoba, Good work from your side. But I say, you can improve it more. You need to center your star icon in the div by using vertical-align: middle; property on star image. There are same font color and size difference in your design. And you can also add mouse hover hand icon when we hover on the number buttons by simply adding cursor: pointer;. One more, you try to add animate submit button it works fine when we hover over it but when we take our mouse away from it, it not animate as we want. I see your code you use transition property in hover state code. You should add this simply on input has type submit by doing this your animation works fine as you want. All the best for your next challenge 👍.

  Marked as helpful

  1

  ---

  

  Marco Pereira•50

  @pereira1185Posted about 2 years ago

  @kartarsohal Thanks a lot for your comment, that's very important when we are learning and do something, it help us to improve our skills and habbits. I see in my code, that all points you have mencioned, that makes sense to me, i will improve that points, Thank you.

  0
• 

  foxynoxy•470

  @purplehippo911Posted about 2 years ago

  Hey, Chizoba. Congratulations on finishing this challenge. 🎈✨🎉 Here's some small stuff that could save you time and make things easier for you:

  Active

  The rating-buttons are supposed to have an :active-selector, which is supposed to change the color when the element is hovered. Here's an example:

  main .ratings > div:active {
    background-color: white;
    color:hsl(25, 97%, 53%);
  }
  
  

  Here's an article explaining how pseudo-classes like :active and :focus work: pseudo-classes

  Variables

  Variables in css, makes things like animation and using colors much more easier. In this case you should use variables for colors, so that you can use them multiple places, but easily be able to change it, by only changing the variables value. You store the variable in the ::root-selector and put two - in front of it. Then you can use it in your element by using the var()-function. Here's an example:

  ::root {
  --lightGrey: hsl(25, 97%, 53%);
  }
  
  .example-element {
  background-color:var(--lightGrey);
  }
  
  

  Here's a simple article about it to give you more examples:cssVariables

  Cursor and transition

  I see that you're using transition on your rating-buttons, but you don't have to add it when its hovering and etc. Just add it in your element, and it will work just fine. And I would also recommend you to add a cursor-property, which changes how the style of the mouse looks like when its hovering or clicking on an element. Like this:

  main .ratings > div {
    background-color: rgba(125, 136, 153, 0.2);
    width: 15%;
    border-radius: 50%;
    padding: 0.7rem 0;
    text-align: center;
   /* this changes how the mouse looks like when this element is hovered or clicked*/
  cursor: pointer;
   / * adding the transition in the element is much more simpler */
    transition: background 0.3s ease-in;
  }
  
  

  That's all, for now. If you have any questions, then you can reply to me here.
  Happy Coding!!💻🖥⌨🖱🗿🗿

  Marked as helpful

  0
• Account deleted

  Hello Emeghiebo Chizoba 👋

  You can add cursor:pointer css property on your div button, it improve a lot user experience by showing pointer cursor instead of text cursor

  Otherwise, congratulation for your achievement 🎉

  0

  ---

  

  Emeghiebo Chizoba•250

  @chizobaemeghieboPosted about 2 years ago

  @bjordandev Thank you for this review, I'll surely keep that in mind for future projects.

  0