Interactive Rating Component using TailwindCss

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

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

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

@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

@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

@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!

@lack21 this code still shows 6 out of 5

@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

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

@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";
});