Submitted almost 2 years ago

Interactive rating component solution -- Radio Buttons with Plain JS

Ting-Huei Chen• 160

@hejkeikei

Preview site View code

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Any feedback will be much appreciated :)

How I did it:

I loop through all the radio button and pass the iterative object to query selector to dynamically get the option that user select.
Get user's input value when the submit button have been click on then show it in DOM.

Question: I would like to try to go with object oriented way such as event target to select an element in the group so that I don't have to write loops all the time. If anyone know please tell me I'll be super thankful.

Community feedback

Hariz• 100

@sj0n

Posted almost 2 years ago

Instead of attaching click event on all the buttons, you could just bind submit event on the form element. When submitted, the form element will contain the data binded on the name from the input element. You could then use FormData function to parse data from the form element.

You can check out my solution if you need an idea on how to solve this challenge.

[1] https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

Marked as helpful

Ting-Huei Chen• 160

@hejkeikei

Posted almost 2 years ago

@sj0n Thank you so much! This is what I'm looking for! I notice that you style the icon with js instead of css. May I ask why?

Hariz• 100

@sj0n

Posted almost 2 years ago

@hejkeikei Sorry for the late reply. I'm assuming you're referring to the element with the class "class_icon"? You could technically do that, but you'll need to write a separate class and modify the element's class with JavaScript.

Carlos Damian Perez• 1,810

@caarlosdamian

Posted almost 2 years ago

Hello, You can try using git repository and upload your page to Github pages your code looks great overall but just that little comment, GitHub will allow you to allocate all you projects and applications with a free hosting https://pages.github.com/ its very easy to upload just create a branch with the name gh-pages and GitHub will automatic upload your pages ,

Marked as helpful

Ting-Huei Chen• 160

@hejkeikei

Posted almost 2 years ago

@caarlosdamian Thanks, it works! https://hejkeikei.github.io/interactive-rating-component/

Carlos Damian Perez• 1,810

@caarlosdamian

Posted almost 2 years ago

@hejkeikei Awesome update your screenshot and that will be all

Please log in to post a comment

Join 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