@DavidMorgade
Posted
Hello Bryan, congrats on finishing the challenge! your component looks really good, let me see if I can help you with your questions
- You could add a validation to make the user select a rating before submitting, instead of just displaying 0 (imagine that the user clicked submit by mistake, the rating will be 0). You can do this easily in your Javascript:
function displayRating() {
if(note === 0) return alert('Please select a rating before submitting!')
if(userNote == 0) return;
displayMainContainers();
}
Another advice is that you should never use html onclicks, they are a bad practice that can cause a lot of bugs, instead of that use an addEventListener to that element in your JS file:
const submitButton = document.querySelector('#submit-button')
submitButton.addEventListener('click', () => {
if(note === 0) return alert('Please select a rating before submitting!')
userNote.innerText = note;
displayMainContainers();
})
- Just use Javascript, with CSS it can clash with your other pseudoelements like
:hover
and can get buggy, also with:focus
if the user clicks outside the button it will lose the focus, you can select all your buttons and remove / add styles at the same time.
Just take as an important part of this feedback that you should never use html functions calls like onclick
, onsubmit
.
Hope my feedback helps you, if you have any questions don't hesitate to ask! great work