Interactive rating component main

Community feedback

• 

  Louie•170

  @PaletteJackPosted over 2 years ago

  That's good! I would say you're pretty close.

  So three things that I think would help you, you'll probably want to grab all the elements instead of one by one using querySelectorAll(). You already have them in the class .abut, so this should work for getting a list (array). document.querySelectorAll('.abut') This link should help you out if it's confusing: https://www.w3schools.com/jsref/met_document_queryselectorall.asp

  Also, I see that onClick you are adding this code: document.getElementById('myClick').style.backgroundColor = "#959eac" document.getElementById('myClick').style.color = "white"

  Instead of tapping into the style and adding the css that way, what you could do is put both of those styles into their own class, let's call it the .clicked class. then you toggle the class using classList.toggle('clicked'). Some more reading that would help you out: https://www.w3schools.com/howto/howto_js_toggle_class.asp

  Last thing is using the innerHTML property. when you select an element, you'll need a way to get the text contained inside of it. You can also use this to set the text in an element. for example: document.getElementById('myClick').innerHTML would return '4' https://www.w3schools.com/jsref/prop_html_innerhtml.asp

  I wish you luck! Hope to see the completed project soon!

  Marked as helpful

  0

  ---

  

  Dhabiri•60

  @DhabiriPosted over 2 years ago

  @PaletteJack thank you soo much, I'll put this in place right away.

  0
• 

  mubizzy•1,520

  @mubizzyPosted over 2 years ago

  nice job @Dhabiri I must say using a two-page for your card component is not the best practice.

  A page is enough you just need to understand the event listener for this part of the project.

  Also, you need to work on the semantic enclose your code in a <main> tag

  Marked as helpful

  0