Interactive rating component

Community feedback

• 

  P

  Jason Merrell•30

  @jason-merrellPosted over 1 year ago

  You might consider setting up the rating component with an actual form element. This is a little bit more of a pain to set up on the front end, but offers much more upside in the flexibility of how you deal with the inputs -- both in CSS and JS.

  <form id="ratingForm" method="post">
      <div class="circle-wrapper">
          <img src="images/star.svg" class="star-icon" alt="star icon" />
      </div>
      <h1>How did we do?</h1>
      <p class="rating-p">Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!</p>
      <div class="d-flex justify-space-between radio-inputs" role="radiogroup">
          <label class="rating-label">
              <input type="radio" name="rating" class="rating-radio" value="1"/>
              <div class="circle-wrapper">
                  <p>1</p>
              </div>
          </label>
          <label class="rating-label">
              <input type="radio" name="rating" class="rating-radio" value="2"/>
              <div class="circle-wrapper">
                  <p>2</p>
              </div>
          </label>
          <label class="rating-label">
              <input type="radio" name="rating" class="rating-radio" value="3"/>
              <div class="circle-wrapper">
                  <p>3</p>
              </div>
          </label>
          <label class="rating-label">
              <input type="radio" name="rating" class="rating-radio" value="4"/>
              <div class="circle-wrapper">
                  <p>4</p>
              </div>
          </label>
          <label class="rating-label">
              <input type="radio" name="rating" class="rating-radio" value="5"/>
              <div class="circle-wrapper">
                  <p>5</p>
              </div>
          </label>
      </div>
      <button type="submit" class="button" id="submitBtn">Submit</button>
  </form>
  

  The native radio input elements can't be customized to the degree the design calls for, but with a little trickery, we can add custom design elements with a hidden radio input as a sibling. We typically do the same thing with other custom designed input elements that have stubborn native limitations, like a checkbox or file upload input.

  It might seem trivial with a form that only has one input value, but it wouldn't be a stretch for the customer to come back and add onto it -- like with a text area input. It also makes the JavaScript easier, letting you take advantage of some native classes that are meant to make form handling more streamlined, like the FormData class.

  You can see more about this implementation with my submission here

  1
• 

  Luka Glonti•3,440

  @lack21Posted over 1 year ago

  Good work 👍, but there are some problems!

  • Class "hide" has 'visibility: hidden', I suggest you to replace that to 'display: none', the difference is that 'visibility: hidden' hides the object, but object still takes the same space as it was before, when 'display: none' hides the object totally (no space, nothing)!

  • Remove 'top: -29rem' from "container2" there's no need for it after you solve the first problem. After you do these two, the extra space on body (scrollbar is shown) will disappear!

  • Remove 'min-width: 33rem' from "site-section", because it does nothing since you have 'width: min(100%, 36rem)'!

  1

  ---

  

  Mileenka•80

  @MileenkaPosted over 1 year ago

  @lack21 Thank you Lucas for the tips i really appreciate it. As for the last point, it changes that the content of the container does not go beyond it when reducing the screen on mobile. I already fixed the rest thank you :)

  1
• 

  Rahul Kumar Mishra•140

  @TheCyberAtomPosted over 1 year ago

  Hello! I noticed that you used multiple if statements in your JavaScript code for the challenge. One suggestion I have for cleaner code is to use a switch statement instead. This approach would make your code cleaner and more organised.

  1

  ---

  

  Mileenka•80

  @MileenkaPosted over 1 year ago

  @TheCyberAtom Hi Rahul I just changed the conditional statement from if to switch. Thank you for the hint :)

  1