All comments

• 

  Charles Mambo• 650

  @charlesmambo

  Submitted about 2 years ago

  hi guys need your help on this one, I dont know if I did this one right please check my JS code, tell me if I write my JS code the right way or if there is short way to write JS cause I feel like there is something missing but I cant figure it out. Thank you

  

  interactive rating component

  2

  20

  

  Mirosław• 240

  @miroslaw-mroczkowski

  Posted about 2 years ago

  Hi Charles,

  Your design looks great :)

  Few tips about JS:

  Instead of using addEventListener for each button, you could create:

  1. static NodeList with querySelectorAll on your num-btn class,
  2. variable (e.g. let scoreValue) to keep clicked value (but you have to set a value on each of your button)
  3. use forEach method to iterate through your NodeList

  const btns = document.querySelectorAll('.num-btn)
  
  let scoreValue = '';
  
  const score = () => {
  	btns.forEach(score => {
  		score.addEventListener('click', e => {
  			scoreValue = e.target.value
  		})
  	})
  }
  

  Then you can use your scoreValue to put it in your sub-container, but you won't need to put the index of your numArr array.

  thankEl.textContent = 'You selected ${scoreValue} out of ${btns.length}'

  You could also add an error message in case of not choosing any score. To do this you need to create e.g. if...else statement.

  In case of any questions feel free to ask :)

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Piotr• 250

  @Piotrek1994

  Submitted over 2 years ago

  I know that there are to many functions in my project, but I didin't find the way to do it better.

  

  Interactive rating component using java script css and html

  1

  30

  

  Mirosław• 240

  @miroslaw-mroczkowski

  Posted over 2 years ago

  Hi Piotr,

  You can use "querySelectorAll" on your buttons and iterate using "for" loop or "forEach" method, use addEventListener to get proper value on each 'click' event.

  The design looks good but the card body is almost not visible. You could use Dark Blue - hsl(213, 19%, 18%), instead of Very Dark Blue.

  In case of any questions feel free to contact me or check my solution :)

  0