Interactive rating component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Luis David, congratulations for your new solution!

  🎯 Your solution its almost done and I’ve some tips to help you to improve it:

  To make the container fully responsive you need to fix two things, the height for the container that's fixed and after the value you've set the information start to pop out:

  .component {
      width: 402px;
      /* height: 373px; */
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      margin: 0 auto;
      padding: 3rem;
      background-color: var(--color-tertiary-dark);
  }
  

  And to make the rating section even more responsive with flex-wrap: wrap to make the buttons adjust automatically depending of the widht:

      flex-wrap: wrap;
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin: 3rem 0;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Harsh Kumar•1,390

  @thisisharsh7Posted about 2 years ago

  Hey Luis, well done! You solution works perfect. You have one issue that needs to be addressed i.e. when user hasn't selected any rating then submit should not show the rating, but here your solution shows the rating so I have modified some of your code.

  let userSelected=false;
  rates.forEach(function (rate) {
  -----your code-----
        answerRate.innerHTML = `You selected ${answer} out of 5`;
       userSelected=true;//user has selected the rating 
     });
  });
  --your code---
  submitBtn.addEventListener("click", function () {
    if(userSelected){//do this when user selects the rating
         front.classList.toggle("hidden");
     back.classList.toggle("hidden");
    }else{//else do this
      alert("you haven't selected any rating");
    }
  });
  

  I hope this helps, happy coding✌️.

  Marked as helpful

  0

  ---

  

  Luis David Guaiquirian•300

  @luisgcodePosted about 2 years ago

  @thisisharsh7 very interesting, I will apply it, thank you!!

  0