Skip to content
Submitted over 1 year ago

Interactive Rating Component

Kyle Petricca•50
@KylePetricca
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi all! I'm sharing my solution to the interactive rating component, this was a really fun task to figure out for my first attempt at a JavaScript challenge on Frontend Mentor.

I'm still relatively new to JavaScript so if anyone has any suggestions on how to better format my program or any improvements that can be made please let me know.

Many thanks!

Community feedback

  • Elyse Kanagaratnam•300
    @elyyysePosted over 1 year ago

    Hey, Kyle - I love how organized your code is, I should really get better at including comments like that. As far as improvements go, I believe the best practice is to build your <form> — including radio inputs and submit button — in your HTML markup. And then simply grab the input's value and update the 'thank you' text with Javascript.

    That said, your approach was clearly intentional — I'm curious to know why you decided to create your form elements with JS?

    Marked as helpful
    1
    Kyle Petricca•50
    @KylePetriccaPosted over 1 year ago

    Hi @elyyyse, thank you very much for the kind words! In all honesty, my reasoning behind rendering the radio buttons with JS was just to challenge myself a bit more than rendering with HTML and also to save me from copy and pasting the input element five times over.

    If this were a real-world example I most likely would've opted for your solution :)

    0
    Elyse Kanagaratnam•300
    @elyyysePosted over 1 year ago

    @KylePetricca - that makes perfect sense, I figured it was something like that.

    1

Please log in to post a comment

Log in with GitHub

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