Interactive rating component using tailwind
Design comparison
Solution retrospective
- I've struggled a bit while creating custom radio buttons.
- How to create custom radio buttons with text in them?
- How can I improve my semantic markup?
Community feedback
- @TedJenklerPosted about 2 years ago
Hi nice work with the design, U need to make buttons and design them and in js link them to a variable t.ex "let rate1 = document.querySelector('#b-1')"
U then need to add a eventlister to wait for a click t.ex "rate1.addEventListener('click', e => { rate = 1 vote = localStorage.setItem("hasVoted", "1") })"
I saved it as a local storage value to be able to use it in the submited page(display it) and i sent to a diffrent page with "submit.addEventListener('click', e => { console.log('Send to new page') if(rate > 0){ e.preventDefault(); window.location.href = "thx.html" } else { alert('Pick 1 to 5') }
})"I would think this is the only way to do this one correct in vanilla JS but havent looked around alot
example of my code(https://github.com/TedJenkler/rating-popup)
Marked as helpful1@numan-iftikharPosted about 2 years ago@TedJenkler Thanks buddy. You did a great work using local storage and buttons as radio buttons. But I think this functionality can easily be achieved without using local storage. I've update my code. Have a look. Suggestions or PRs are always welcomed! Happy coding :)
0
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