Interactive Rating Component using TailwindCss

Community feedback

• 

  Luka Glonti•3,440

  @lack21Posted over 1 year ago

  Great work 👍, but I have some recommendations!

  • Replace height: 100vh to min-height: 100vh in the body, the difference is that, when you set height: 100vh to something, that means it won't be bigger than that, it might cause some problems in the future, so better approach is to set min-height: 100vh, like this in case content is overflowing container will adjust to it!
  • Replace width: 30% in the main to the width: min(25rem, 90%), like this it will be responsive on desktop, tablet and mobile devices!
  • Replace width: 3.5rem and height: 3.5rem in the buttons to the width: 50px and height: 50px!
  • The problem with submitted button is that it is a button, you have this in your JavaScript const buttons = document.querySelectorAll("#main button"), this code takes all buttons in main including last submit button, you can either redefine button and set div instead or add btn class to the first five buttons and change const buttons = document.querySelectorAll("#main button") to this const buttons = document.querySelectorAll("#main .btn")!

  1

  ---

  

  Santhosh Kumar•110

  @Iamsanthosh2203Posted over 1 year ago

  @lack21 even when i selected all main 5 buttons how do get its value on the submit button ?

  0

  

  Luka Glonti•3,440

  @lack21Posted over 1 year ago

  @Iamsanthosh2203 That's because whenever you click button you use this

  mainContainer.style.display = "none";
  thanksContainer.style.display = "flex";
  

  1

  

  Santhosh Kumar•110

  @Iamsanthosh2203Posted over 1 year ago

  @lack21 i need help in getting the value of the numbers i selected from 1 to 5 when i click on submit it shows 6 but i need to have the value of 1 to 5 buttons

  i dont know how to explain it :( ???

  just preview my website and help

  0

  

  Santhosh Kumar•110

  @Iamsanthosh2203Posted over 1 year ago

  @lack21 i need help in getting the value of the numbers i selected from 1 to 5 when i click on submit it shows 6 but i need to have the value of 1 to 5 buttons

  i dont know how to explain it :( ???

  just preview my website and help

  0

  

  Luka Glonti•3,440

  @lack21Posted over 1 year ago

  @Iamsanthosh2203 Replace this

  buttons.forEach((button, index) => {
  button.addEventListener("click", function () {
  mainContainer.style.display = "none";
  thanksContainer.style.display = "flex";
  thanksNumber.textContent = index + 1;
  });
  });
  

  to this

  buttons.forEach((item, index) => {
  item.addEventListener("click", () => {
  buttons.forEach((item) => item.classList.remove("active"));
  item.classList.add("active");
  thanksNumber.textContent = index + 1;
  });
  });
  
  submitBtn.addEventListener("click", () => {
  if (!thanksNumber.textContent) {
  return alert("Please Rate Us!");
  }
  
  mainContainer.style.display = "none";
  thanksContainer.style.display = "flex";
  });
  

  When button is clicked active class will be added to it, you can change button when it has active class like it has different background and color!

  1

  

  Santhosh Kumar•110

  @Iamsanthosh2203Posted over 1 year ago

  @lack21 this code still shows 6 out of 5

  0

  

  Luka Glonti•3,440

  @lack21Posted over 1 year ago

  @Iamsanthosh2203 Did you finish this part?

  The problem with submitted button is that it is a button, you have
  this in your JavaScript
  const buttons = document.querySelectorAll("#main button")
  this code takes all buttons in main including last submit button,
  you can either redefine button and set div instead or add btn class
  to the first five buttons and change
  const buttons = document.querySelectorAll("#main button") to this
  const buttons = document.querySelectorAll("#main .btn")!
  

  and this code you wrote

  submitBtn.addEventListener("click",function(){
  mainContainer.style.display="none";
  thanksContainer.style.display="flex";
  })
  
  buttons.forEach((rate) => {
  rate.addEventListener("click",function(){
  thanksNumber.innerHTML = rate.innerHTML;
  })
  });
  

  does not match up with what i said earlier

  1

  

  Santhosh Kumar•110

  @Iamsanthosh2203Posted over 1 year ago

  @lack21 Thank you for your help now I have updated my webpage and I works perfectly fine :)

  0

  

  Luka Glonti•3,440

  @lack21Posted over 1 year ago

  @Iamsanthosh2203 Good, but submit button still is clickable, when number is not selected! You should add this

  if (!thanksNumber.innerHTML) {
  return alert("Please Rate Us!");
  }
  

  when you click submitBtn using addeventlistener! Like this

  submitBtn.addEventListener("click", () => {
  if (!thanksNumber.innerHTML) {
  return alert("Please Rate Us!");
  }
  
  mainContainer.style.display = "none";
  thanksContainer.style.display = "flex";
  });
  

  0