Rating Component with JS

Community feedback

• 

  waltuh12345•390

  @waltuh12345

  Posted almost 2 years 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; }

  01

  Marked as helpful
• 

  Toheeb•170

  @Toheeb345

  Posted almost 2 years 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!

  21
• 

  Ozzy-codes•130

  @Ozzy-codes

  Posted almost 2 years 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!

  11