Interactive Rating Component using HTML, CSS and JS

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Wesley, congrats on finishing the challenge! your app works perfectly and has the proper checks for the submit button

  Don't feel overwhelm in your first JS project, the important thinks when learning a new technology or programming language is to get it to work, doesn't matter if it's spaguetti code or not, is your first project and it works so the job is done!

  Your JS looks pretty good structured and you are using loops and if checks impresive for a first Javascript project IMO. You could have use a forEach loop to make it a bit more clear instead of a for of loop, wich actually is faster but less readable, for example something like:

  form.addEventListener('submit', function (event) {
      event.preventDefault();
      radioButtons.forEach((button, index) => {
             if(!button.checked) return;
              rating.append(button.value);
              mainContainer.classList.add('fade-in');
              innerContainer.classList.add('hide');
              innerContainer2.classList.remove('hide');
       })
  })
  

  Instead of checking it is checked, you can check if its not checked and instantly return, at the end is the same thing, also removed the console.log

  You can see that the differences are minimal, consider that I did write this code just here in this comment and didn't check the functionality!

  Hope my feedback helps you, keep going with those JS challenges!

  Marked as helpful

  1

  ---

  

  Wesley•330

  @wesleyjacobyPosted about 2 years ago

  @DavidMorgade Hi David,

  Thanks so much for the message! I really appreciate the kind words. It feels as if my code is always stuck together with duct tape, but hopefully with more experience it'll become more structured.

  I completely forgot about forEach. I need to refresh my memory on the syntax though. I'm not sure what "index" is for?

  The !button is a bit of a mind bender for me, but I'll definitely play around with it to try get more comfortable.

  That console.log was for my debugging and completely forgot to remove it. Haha. I'll remove it now.

  Thanks again for your help and feedback. I really appreciate it.

  1
• 

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-MontanoPosted about 2 years ago

  Hello Wesley!

  Congratulations

  Your solution for this challenge is correct, there are other ways to do it, but yours is also valid. Now you can look at other solutions to this challenge from other colleagues and you can compare and learn. Keep practicing with JavaScript and it will get easier and easier

  For the depressing and difficult don't worry, that will also help you deal with the frustration, very present in programming.

  Note: I have been up to 25 days to achieve a solution.😂😂😂

  Marked as helpful

  1

  ---

  

  Wesley•330

  @wesleyjacobyPosted about 2 years ago

  @Enmanuel-Otero-Montano Hi Enmanuel,

  Thanks so much for the kind words and advice. I'll definitely take a look at other peoples code to see different ways of solving the challenge. I'm sure there are more elegant ways compared to mine.

  Coming from another profession where I'm highly proficient to taking days trying to solve simple challenges like this is frustrating, but hopefully it'll get easier.

  Thanks again! :)

  1