Skip to content
Submitted about 1 year ago

Interactive rating component [3]

Dean•190
@DeanMustafa
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

I decided to create all challenges to gain some experience. As a self-taught developer, it is almost impossible to gain real-life experience. I think this will help me to get a job in the future.

Community feedback

  • wannacode•700
    @kwngptrlPosted about 1 year ago

    Hi, I noticed that whatever I select and pressed 'submit' it defaults to 4 of 5. Then, a typo on line 6 of the html: <title>Inactive Rating</title>. It should be <title>Interactive Rating (Component)</title>.

    Marked as helpful
    0
  • Jeremy Helsel•670
    @JIH7Posted about 1 year ago

    I love the animations! There appears to be a bug in your code caused by this tag:

    <a class="btn" href="submitted.html" class="submit">SUBMIT</a>

    You declare the class attribute twice, so the second one is invalid. This is causing an error in the console as your JS can't find the submit class with querySelector. Instead you can have two classes on the same element separated by spaces like this:

    <a class="btn submit" href="submitted.html">SUBMIT</a>

    Also, you could pretty easily have the rating show on the next page. You need to avoid having a page load to do this. Some easy ways to do that, you could either have one big HTML document where the second page is hidden until submit is clicked, or you could set the innerHTML document of the first tag within your <body> from your JavaScript.

    Marked as helpful
    0
    Dean•190
    @DeanMustafaPosted about 1 year ago

    I did not notice that I assigned 2 classes. I guess, I was tired. I tried almost everything I know to appear rating on the second page. But I did not know how to do that. I am learning now and I have some ideas on how to do that, also you mentioned solutions too. Thanks anyway! @JIH7

    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