Interactive rating component using HTML,CSS,JS,FLEXBOX

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted about 2 years ago

  This still needs a bit of styling work. Make sure you check it on all screen sizes, even down to 320px wide phones in devtools emulator. The aspect ratio property in a few places may solve it all, along with the body background

  I recommend not using IDs as js selectors and not calling them things like "div1" which is very generic. It is a better practice to use js specific selectors that are more meaningful like .js-form-panel and .js-thanks-panel. It will be much easier to see what the js is doing both inside the html and inside the js file.

  I also recommend splitting the function out into a named function and calling that in your event listener instead. Easier to read and follows a pattern that will be more usable for bigger projects.

  Wrap the thank you panel in an extra div and give it the aria-live attribute. This means that the thank you content will be announced to screenreader users. This attribute needs to go on its own element that is always present in the DOM, it should not be on an element that is display none / hidden

  2

  ---

  

  VenkatSairam•80

  @venkat2305Posted about 2 years ago

  @grace-snow can you please tell me what styling needs work? gradient colour is not being applied to the background of the star. can you please tell me why? how can I fix this? and can you please recheck the project I made a few changes?

  0

  

  T

  Grace•31,230

  @grace-snowPosted about 2 years ago

  @venkat2305 emulate iPhone 5 or SE in devtools and you will see issues with the radio backgrounds going tiny

  1

  

  VenkatSairam•80

  @venkat2305Posted about 2 years ago

  @grace-snow if I change anything, it's messing up the responsiveness of the card. Can you please tell me what should I do?

  0

  

  T

  Grace•31,230

  @grace-snowPosted about 2 years ago

  @venkat2305 something like

  
  /* index.css | https://venkat2305.github.io/Interactive-Rating-Component/index.css */
  
  .container {
    /* max-width: 450px; */
    /* height: 430px; */
    /* padding: 45px; */
    max-width: 26rem;
    padding: 2rem;
  }
  
  body {
    /* font-size: 15px; */
    font-size: 0.9375rem;
  }
  
  .img-container {
    aspect-ratio: 1;
  }
  
  .form-button {
    /* font-size: 25px; */
    /* margin: 5px; */
    font-size: clamp(1rem, 5vw + 1px, 1.5rem);
  }
  
  .form-circles {
    gap: 0.5rem;
  }
  
  

  1

  

  VenkatSairam•80

  @venkat2305Posted about 2 years ago

  @grace-snow thanks. I've made the changes. In iPhone SE , the card seems to be touching the left side of the page. Is it correct or what's wrong. thanks in advance

  0

  

  T

  Grace•31,230

  @grace-snowPosted about 2 years ago

  @venkat2305 it's because of two things

  1. You've set width 55px instead of max-width on the labels. This needs to be in rem/em as well, not px
  2. You've added a <br> at the end of that list of inputs/labels

  I would also change rating-card to container in this css selector to fix the margins in your thank you panel

  .container > * + * {
    margin-top: 1rem;
  }
  

  Well done!

  0

  

  VenkatSairam•80

  @venkat2305Posted about 2 years ago

  @grace-snow if the width is changed to max-width, the circle on the rating values becomes much smaller. what can I do?

  0

  

  T

  Grace•31,230

  @grace-snowPosted about 2 years ago

  @venkat2305 width 100% has been commented out I think

  Open dev tools on the side and you can debug

  0