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

html css js webpack

Doris 20

@DorisSch15

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


Hope to get a lot of feedbacks from all of you. Still working to be better at javascript. Thanks for your help !

Oh yeah and I need to point out that I only did the desktop version :) I know, it's mobile first but I needed a good feeling when creating the HTML/CSS part and an AHA moment with the Javascript.

Community feedback

@avinashdhauni

Posted

Hello Doris, I noticed a little problem with the project. When you click in between numbers, like for example- between 2 or 3, or maybe 3 or 4, etc then all the numbers are being selected. And after that, if you click submit then all the numbers are shown on the Thank You component. I don't know what the issue is because you seemed to have used webpack and other stuff that I am not familiar with. And also I guess you forgot to give hover effects to the submit button as well. But congratulations on completing the challenge. Happy Coding!

Marked as helpful

1

Doris 20

@DorisSch15

Posted

@avinashdhauni Hi Avinash. Thanks for your feedback. yeah I figured out, what the problem is and it's solved :) I had some problems with .matches() - I just took a div and not "div.choose__selection-n". It works know. Yea I though the over effects should be gray and not orange. so I went with light grey and as soon as it is activ it changes to orange :)

0
Elaine 11,400

@elaineleung

Posted

Hallo Doris, well done on your second challenge! Like what Avinash mentioned, there's an issue with the previously "activ" numbers being still stuck in "activ" mode. To remove the class, try adding a forEach in the zahlAusgeben function to loop through the elements:

function zahlAusgeben(e) {
    document.querySelectorAll('.choose__selection-n').forEach( btn => {
       if (btn.classList.contains('activ')) btn.classList.remove('activ')   
    })
    if (e.target && e.target.matches('div.choose__selection-n')){
        number = e.target.innerText;
        e.target.classList.add('activ');
    };
};

Another thing I recommend here is, instead of using div for the buttons, try button first, as this would be better for screen reader users since button can be controlled by a tab key, but a div cannot unless you write a bit more code to it.

Viel Erfolg!

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