"Star Rating - JS"
Bootstrap 4.1.1 Snippet by RizwanAkram

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="form-group"> <label for="">Hotel Preference</label> <div class="star-rating"> <i class="fas fa-star" id="star1" onclick="add(this,1)"></i> <i class="fas fa-star" id="star2" onclick="add(this,2)"></i> <i class="fas fa-star" id="star3" onclick="add(this,3)"></i> <i class="far fa-star" id="star4" onclick="add(this,4)"></i> <i class="far fa-star" id="star5" onclick="add(this,5)"></i> </div> </div>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css'); .star-rating i { color: red; font-size: 24px; }
// STAR RATING function add(ths, sno) { for (var i = 1; i <= 5; i++) { var cur = document.getElementById("star" + i) cur.className = "far fa-star" } for (var i = 1; i <= sno; i++) { var cur = document.getElementById("star" + i) if (cur.className == "far fa-star") { cur.className = "fas fa-star" } } }

Related: See More


Questions / Comments: