Skip to content
OverviewSolutions
5
Comments
4
Hariz
@sj0n

All comments

  • Ting-Huei Chen•180
    @hejkeikeiSubmitted over 2 years ago

    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.

    Interactive rating component solution -- Radio Buttons with Plain JS

    2
    Hariz•100
    @sj0nPosted over 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
    0
  • Hariz•100
    @sj0nPosted over 2 years ago

    Before grid was available, Flexbox was used for layout and to construct components. Now that grid is widely supported, you can use either. But generally, you would use Flexbox to construct components and grid for layout depending on how complicated the layout is.

    For your rating component, you should use radio-type input because with radio-type input you could only choose one option and that is suitable for this problem. Once that is done, you would use JavaScript to get the value from the input and display it.

    Lastly, I recommend you to watch Kevin Powell's video on CUBE CSS which teach you how to better structure your CSS.

    0
  • Hariz•100
    @sj0nPosted over 2 years ago

    These days people use flexbox or grid to style responsive layout. With card component, there is not much needed to be done to ensure the component is responsive. You can check out my solution for examples.

    0
  • Keith Ching•110
    @keithc07Submitted over 2 years ago

    What is the best practice to create those rating buttons? I am not sure is there a faster or better way to create the buttons. Feel free to give me any suggestions

    HTML, CSS, JavaScript

    1
    Hariz•100
    @sj0nPosted over 2 years ago

    For my solution, I use radio-type input because fundamentally that's how they works although it's a bit tricky to style them per design but it's possible.

    1