Design comparison
Solution retrospective
Updated...
Community feedback
- @elaineleungPosted about 2 years ago
Hi Amaar, great job here, and interesting choice with the box shadow hover (looks a bit like an eclipse)!
I think using
setTimeout
is fine, but from a user experience perspective and also in a real-life situation, it's probably not necessary to return to the previous screen for this case. Rating components are usually meant for a one-time use because if the user is allowed to make more than one rating, that would affect the score and it doesn't give an accurate picture for data collection. The exception here I think is unless the user is not anonymous, as in, they have their name recorded so that the data collection team can easily see duplicated entries by the same person. Hope this helps!Marked as helpful0 - @ErayBarslanPosted about 2 years ago
Hey there, excellent work on this one! Regarding your question, another option would be adding a return button. You can use setTimeout here but it displays only for 1,5 seconds which isn't enough for the user to read the page. It's better to use a higher value. Additional suggestions:
- Right now user can submit without selecting a rate and it returns undefined value. To prevent this you can add an if state to your submit event listener function like:
submit.addEventListener("click", () => { if (a) { /* your entire function */ } })
- On screens smaller than 400px, content overflows out of body. That is due to using fixed width value. Instead you can use
max-width: 385px;
to make your container responsive. By default it'swidth: auto
which is taking the available space without overflowing. Giving fixed width overrides this. Aside these nothing much I'd add and happy coding :)
Marked as helpful0 - @DavidMorgadePosted about 2 years ago
Hello Amaar, congrats on finishing the challenge!
To answer your question, I think that adding a
setTimeout
is the best way to get the desired effect that you want, I would give more time to the user to read the thanks you card tho.A little problem in your project is that the rating can be submitted even when there is no rate selected and it returns undefined!, you could use an
if
guard close to return if no rating was selected.Also checked in your code that you were selecting the buttons one by one, instead of that you could use a
forEach
orfor
loop on all your buttons and select all of them at the same time, other tricky way could be selecting the parent element and from that get the closestbutton
, something like this:const ratingContainer = document.querySelector('.rate'); // here you select the container of ratings ratingContainer.addEventListener('click', function (e) { const clicked = e.target.closest('button'); // selecting the closest button if (!clicked) return; // if clicking outside the button returns
Hope my feedback helps you! if you have any questions, don't hesitate to ask, great job!
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord