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

Rating component [HTML/SCSS/JS] + animations

Adam 60

@Vorczu

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


  1. Dont know a thing about gradient bg, I dont know is that a good option or should I do it different
  2. Rating detector - its looking simple but maybe an event listener will be a better option ?

Community feedback

Yuliya 230

@Ambrolla

Posted

Hello Adam!

First, good job on your code and for trying! Second, I try to do my best following directions (answering your question about color gradient). So, yes, I think it is important. :) Third, there are some files in your github repo that I would include in the .gitignore. I recommend you reading about it! For example, you don't need to include style-guide :) And I'm a bit confused what is .css.map is, but I'll google it later.

Fourth, I would suggest instead of this: <div id="1" class="number" onclick="ratCilcked(this.id)">1</div> <div id="2" class="number" onclick="ratCilcked(this.id)">2</div> <div id="3" class="number" onclick="ratCilcked(this.id)">3</div> <div id="4" class="number" onclick="ratCilcked(this.id)">4</div> <div id="5" class="number" onclick="ratCilcked(this.id)">5</div>

Use event-target and event listener.

1

@mustafadede

Posted

Hi Adam! Your button have a border but design not. You should delete your border in your css file like border: 0;

0

Adam 60

@Vorczu

Posted

@mustafadede fixed, thanks for feed :)

0

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