Interactive rating cart

Community feedback

• 

  Rupak Mukherjee•1,070

  @hannibal1631Posted 2 days ago

  Well, you've got the wrong idea about the rating buttons.

  You have currently used orange when hovering which is not the case.

  It's supposed to be orange when you click on it, so use .btn:focus { background-color: #f3653a; } and when you hover over the buttons, use .btn:hover { background-color: #ECDFCC; }.

  Hope this helps. Happy coding.

  And let me know if you would like to connect and work on some projects together, because like you i'm also self-taught. so let's connect.

  Marked as helpful

  0

  ---

  

  hkaur108•100

  @hkaur108Posted 2 days ago

  @hannibal1631

  Hello, sure we can connect and work on projects together. I will definetly try your help regarding the button focus.

  Thanks you!

  0

  

  Rupak Mukherjee•1,070

  @hannibal1631Posted 1 day ago

  @hkaur108 sure, let me know where would you like to connect.

  0
• 

  KapteynUniverse•2,150

  @KapteynUniversePosted 1 day ago

  Hey @hkaur108, since @hitmorecode answered your question, i like to add some improvements.

  Add flex-direction: column; to the body, so container and footer will be in line.

  You don't need all of that media queries, width: 30vw; on the container is the line breaking the responsiveness. You can use max-width if you want but it doesn't look like it is needed. Probably you gonna need it after font-size, so a max-width: 25rem might be good.

  Use rem especially for font sizes and media queries. Remove the font-size: 10px; on the body. Because of it, h1 is 30px (because of 30em) it is ok but i can't read the paragraph (it is 5px because of .5em) at all. So changing h1 to something like 2rem and p to 1rem might be better.

  Adding align-content: center; to the .btn class will center the numbers on the buttons.

  Also some elements like button don't inherit the font-family etc. You can use

  button {
    font: inherit;
  }
  

  Using a modern css reset for every project will help things like that.

  0
• 

  hitmorecode•6,660

  @hitmorecodePosted 1 day ago

  I took a quick look at your javascript and css file. With javascript on click you are adding the class active but the class active does not exist in your CSS, therefore javascript. Another issue

  $('.btn').on('click', (e)=>{
      x=e.target.id;
      $('.btn').removeClass("active");
      $(this).addClass("active");
  })
  

  With the same click you want to add and remove the class active at the same time. Instead of adding an removing, why not use toggle. With toggle you can turn on and off the class that you want to use.

  I hope you find this helpful Keep it up 👍👌

  0