Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive rating component [3]

Dean 190

@DeanMustafa

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

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 680

@kwngptrl

Posted

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
P

@JIH7

Posted

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

@DeanMustafa

Posted

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
Discord logo

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