Rating Component with JS

Community feedback

• 

  waltuh12345•390

  @waltuh12345Posted over 1 year ago

  cause you set the margin-left to 500px. that's probably why. use this if you want to center an element. .wrapper { display: grid; place-items: center; min-height: 100vh; }

  Marked as helpful

  0

  ---

  

  faybas•70

  @faybasPosted over 1 year ago

  thanks a lot @waltuh12345 lemme do that

  0
• 

  Toheeb•170

  @Toheeb345Posted over 1 year ago

  An easy way you can do this is by giving an ID of the exact number for each of the buttons in the html file, then you store the ID in a variable to get the ID of the button clicked, and then you output the variable in the result part

  Example:

  <button id="1" class="rate">1<button >

  <button class="btn">submit<button >

  const btn = document.queryselector('.btn');

  const rate= document.queryselector('.rate');

  btn.addEventListener("click", ( ) => {

  const rateValue = rate.id;

  result.innerHTML = ${rateValue};

  });

  That's just a demo code to show you what i was talking about, let me know if you got it!

  2

  ---

  

  faybas•70

  @faybasPosted over 1 year ago

  @Toheeb345 Thanks for your reply. could you explain your code a bit more? I'm still new to Javascript.

  0
• 

  Ozzy-codes•130

  @Ozzy-codesPosted over 1 year ago

  Hi Faybas

  Offering another option in addition to @Toheeb345 suggestion. Take a look at my forked repo for alternative. I've seen more than one take this approach @llr3v0ll & @beveroni

  TL:DR - Instead of using buttons for each score, create a group of radio buttons and utilize the pseudo class selector

  input:checked
  

  to update the page.

  Hope this helps!

  1

  ---

  

  faybas•70

  @faybasPosted over 1 year ago

  Thank you very much @Ozzy-codes. Your solution worked wonderfully

  0