@AdrianoEscarabote
Posted
Hello Kacper, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:
To make the submit button work only when the user selects a number we can do this:
ratingButton.forEach((rate) => {
rate.addEventListener("click", () => {
choosenRating.innerHTML = rate.innerHTML;
submitButton.addEventListener("click", () => {
thanksSection.classList.remove("hidden");
ratingSection.classList.add("hidden");
});
});
});
The remainder is excellent.
I hope it's useful. 👍
Marked as helpful
@yishak621
Posted
@AdrianoEscarabote maybe thats possible but instead of nesting the event listeners and replacing the innerHTML we can simply use forEach method to iterate over the rating btns Array(converting the nodelist to Array by spread operators
...)and using if statments to check if there is active rating btns ...
Marked as helpful
@yishak621
Posted
@AdrianoEscarabote and also for the rating btns we r not gonna replacing the innerHTML to make it active we can just adding the active class
function callBack() {
//logic-when we click on the btns container[ratingbtns]
ratingBtns.addEventListener('click', (e) => {
const id = e.target.dataset.id;
console.log(id);
if (id) {
//remove active state from btns
eachBtns.forEach((btn) => {
btn.classList.remove('btn-active');
e.target.classList.add('btn-active');
textResult.innerHTML = `You selected <span class="result-number"> ${id}</span> out of 5`; //printing the selected value to result
});
}
});
}
Marked as helpful
