html css js webpack

Community feedback

• 

  Avinash Dhauni•170

  @avinashdhauniPosted over 2 years ago

  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

  @DorisSch15Posted over 2 years ago

  @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

  @elaineleungPosted over 2 years ago

  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