DEV Community

Cover image for Star Rating Feedback using Javascript
Rajamanickam
Rajamanickam

Posted on Edited on

Star Rating Feedback using Javascript

#beginners #css #javascript #react

In this tutorial has helped you learn how to create star rating feedback using javascript

First of all, create simple form

<form method="GET" name="feedback" action="#" onsubmit="feedBack(); return false">
      <input type="radio" name="star" id="rate" value="">
      <textarea cols="30" id="comment" placeholder="Describe your comment"></textarea>
</form>
Enter fullscreen mode Exit fullscreen mode

while development use the fontawesome icons and google fonts

Now get the input values using javascript

function feedBack() {
 var rating_Count = document.querySelector("input[name=star]:checked").value;
    var comment = document.getElementById('comment').value; 
document.getElementById('comment_text').innerHTML = comment;
    document.getElementById('star_count').innerHTML = rating_Count;
  }
Enter fullscreen mode Exit fullscreen mode

Adding simple validation


document.getElementById('comment').value === ''

if value is empty shown error message.

Youtube Video : https://youtube.com/shorts/2LLre0ld1pk?feature=share
Demo : https://star-rating-feedback.vercel.app/
Portfolio : https://rajamanickam.vercel.app/
Github : https://github.com/erajamanickam/star-rating-feedback
Codepen : https://codepen.io/erajamanickam/pen/dyjydOj

Top comments (0)