We Keep Coding

Star Rating mouse click when hovering over stars

I'm trying to have a mouse icon show up when I hover over the stars in this script using Bootstrap 4.
This is the form.
<div class="form-group">
<h4>Rate this product</h4>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<input type="hidden" class="form-control" id="rating" name="rating" value="1">
<input type="hidden" class="form-control" id="product_id" name="product_id" value="<?php echo $_GET['id']; ?>">
<input type="hidden" name="action" value="saveRating">
</div>
And here is the Javascript
$( ".rateButton" ).click(function() {
if($(this).hasClass('star-grey')) {
$(this).removeClass('star-grey').addClass('star-highlight star-selected');
$(this).prevAll('.rateButton').removeClass('star-grey').addClass('star-highlight star-selected');
$(this).nextAll('.rateButton').removeClass('star-highlight star-selected').addClass('star-grey');
} else {
$(this).nextAll('.rateButton').removeClass('star-highlight star-selected').addClass('star-grey');
}
$("#rating").val($('.star-selected').length); //count the num of star selected
});
This is how I want it to look https://imgur.com/a/sTkSQR2

I'm trying to have a mouse icon show up when I hover over the stars in
this script using Bootstrap 4
Showing mouse cursor to look like pointed hand (as in image) can be done using below css.
.rateButton {
cursor: pointer
}
Bootstrap way of doing it
Add role="button", then a cursor turns to hand. Bootstrap reference
Reboot includes an enhancement for role="button" to change the default
cursor to pointer. Add this attribute to elements to help indicate
elements are interactive. This role isn’t necessary for
elements, which get their own cursor change.
Your code will look like
<i role="button" class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
Example
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<i role="button"> I am an i tag, hovering me should change the cursor to a hand</i>
<br />
<br />
<i> I am an i tag, but I dont have role="button" hovering me WILL NOT change cursor to a hand</i>
I prefer the first method if you don't want to edit the html

jquery making html checkbox appear as blinking question mark and exclamatory mark

i have created a checkbox list group from bootstrap, the code is like below:
<link href="https://www.ishtasakhi.com/assets/css/bootstrap-checkbox-radio-list-group-item.css" rel="stylesheet" />
<link href="https://www.ishtasakhi.com/assets/css/bootstrap-checkbox-radio-list-group-item.min.css" rel="stylesheet" />
<div class="list-group checkbox-list-group">
<div style="height:45px;" class="list-group-item"> <label><input type="checkbox"><span class="list-group-item-text"><i class="fa fa-fw"></i> Large</span></label></div>
<div style="height:45px;" class="list-group-item"> <label><input type="checkbox"><span class="list-group-item-text"><i class="fa fa-fw"></i> Medium</span></label></div>
</div>
<script src="https://www.ishtasakhi.com/assets/js/jquery-plugins.js"></script>
as you can see I have included my jquery file, now when u run the code it will start blinking questionmark and explanatory mark , where as it should show tickbox. can anyone please tell me what could be the reason for this error. thanks in advance

For tick box: use fa fa-check-square... for the checkbox: use fa fa-fw
<link href="https://www.ishtasakhi.com/assets/css/bootstrap-checkbox-radio-list-group-item.css" rel="stylesheet" />
<link href="https://www.ishtasakhi.com/assets/css/bootstrap-checkbox-radio-list-group-item.min.css" rel="stylesheet" />
<div class="list-group checkbox-list-group">
<div style="height:45px;" class="list-group-item"> <label><input type="checkbox"><span class="list-group-item-text"><i class="fa fa-fw"></i> Large</span></label></div>
<div style="height:45px;" class="list-group-item"> <label><input type="checkbox"><span class="list-group-item-text"><i class="fa fa-fw"></i> Medium</span></label></div>
</div>
<h3>What you have here</h3>
fa fa-fw: <i class="fa fa-fw"></i> <br/> fa fa-check-square: <i class="fa fa-check-square"></i> <br/>
<script src="https://www.ishtasakhi.com/assets/js/jquery-plugins.js"></script>

'click' event only fires on first click and not second

I have five elements and want something to happend when I click one of them. My code works fine when clicking for first time, but the event never hits on second click. Any idea why?
$("#ratingModal").find(".star.clickable").on("click", function () {
console.log("click");
var $wrap = $(this).closest(".stars");
var count = parseInt($(this).data("star"));
$.each($wrap.find(".star"), function ($index, $itm) {
let current = parseInt($($itm).data("star"));
$($itm).removeClass("fas");
$($itm).removeClass("far");
console.log(current);
if (current <= count) {
$($itm).addClass("fas");
console.log("fas");
}
else {
$($itm).addClass("far");
console.log("far");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="ratingModal">
<div class="body">
<div class="score-wrap">
<span class="label">Score: </span>
<div class="stars">
<i class="fas fa-star clickable star star-1" title="1" data-star="1"></i>
<i class="far fa-star clickable star star-2" title="2" data-star="2"></i>
<i class="far fa-star clickable star star-3" title="3" data-star="3"></i>
<i class="far fa-star clickable star star-4" title="4" data-star="4"></i>
<i class="far fa-star clickable star star-5" title="5" data-star="5"></i>
</div>
</div>
</div>
</div>

Try Using off().on('...') function
$("#ratingModal").find(".star.clickable").off().on("click", function () {
console.log("click");
var $wrap = $(this).closest(".stars");
var count = parseInt($(this).data("star"));
$.each($wrap.find(".star"), function ($index, $itm) {
let current = parseInt($($itm).data("star"));
$($itm).removeClass("fas");
$($itm).removeClass("far");
console.log(current);
if (current <= count) {
$($itm).addClass("fas");
console.log("fas");
}
else {
$($itm).addClass("far");
console.log("far");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="ratingModal">
<div class="body">
<div class="score-wrap">
<span class="label">Score: </span>
<div class="stars">
<i class="fas fa-star clickable star star-1" title="1" data-star="1"></i>
<i class="far fa-star clickable star star-2" title="2" data-star="2"></i>
<i class="far fa-star clickable star star-3" title="3" data-star="3"></i>
<i class="far fa-star clickable star star-4" title="4" data-star="4"></i>
<i class="far fa-star clickable star star-5" title="5" data-star="5"></i>
</div>
</div>
</div>
</div>

click a link with angularjs not responding to click

I am trying to click a link with angularjs but it is not responding to click events when clicked. On clicking the anchor link nothing happens. This is the snippet of the angularjs script tag
<script data-require="angular.js#1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script type="text/javascript">
angular.module("module",[])
.controller("controller",function($scope){
$scope.func =function(){
alert('clicked me');
}
})</script>
I am applying the click this way but it is not responding to click events
<div ng-app="module" ng-controller="controller" class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
<br>
<a ng-click="func()" href="#">Take me there</a> <!-- area of problem -->
</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details
</p>
</div>
Why is click event not happening using angularjs

Above cord works without any issue. Probably you can compare and see
Demo
angular.module("module",[])
.controller("controller",function($scope){
$scope.func =function(){
alert('clicked me');
}
})
<script data-require="angular.js#1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<div ng-app="module" ng-controller="controller" class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
<br>
<a ng-click="func()" href="#">Take me there</a> <!-- area of problem -->
</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details
</p>
</div>

I've just created a jsbin. It works
https://jsbin.com/hifujod/edit?html,js,console,output
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div ng-app="module" ng-controller="controller" class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
<br>
<a ng-click="func()" href="#">Take me there</a> <!-- area of problem -->
</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</body>
</html>
javascript
angular.module("module",[])
.controller("controller",function($scope){
$scope.func =function(){
alert('clicked me');
}
})

It's working fine.Check your css because may be css override the element.
angular.module("mainApp",[])
.controller("ctrl",function($scope){
$scope.func =function(){
console.log('Hi!');
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script>
<div ng-app="mainApp" ng-controller="ctrl" class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
<a ng-click="func()" href="#">Take me there</a>
</p>
<p class="btn-details">
<i class="fa fa-list"></i>More details
</p>
</div>

Modify the line below as mentioned here and give a try
<a ng-click="func()" href="">Take me there</a>

Set font awesome icon into jquery

I am ussing html, css3 and jquery. And i want to use font awesome icon into jquery. But i don't know how to use font awesome icon into Jquery.
FONT ICON:
<i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>
CODE:
<div class="display-icon">
<i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>
</div>
JQUERY CODE:
$('.display-icon').click(function(){
-----FONT AWESOME ICON------
});
Font awesome icon working fine in the html code.
I want to set this icon into jquery code.

Here is a solution, I would suggest targeting with <i id="myId"> instead of the children of "display icon", more tighter...
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<body>
<div class="display-icon">
<i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>
</div>
</body>
<script>
$('.display-icon').click(function() {
$(this).children("i").attr("class", "fa fa-circle-o-notch fa-pulse fa-3x fa-fw ") ;
});
</script>
</html>

Try this:
$('.display-icon').click(function(){
$("#show-icon").addClass('fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw ');
});
and:
<div class="display-icon">
click me :)
<i class="" id="show-icon"></i>
</div>
I hope this solves your problem :)

If you want to add a spinner icon when button is clicked, you may insert at the desired place in the HTML and toggle visibility with javascript (jQuery in your case):
<script>
$(document).ready(function(){
$('#toggle-spinner').on('click', function(){
$('#my-spinner').toggle();
});
});
</script>
<input type="button" id="toggle-spinner" value="Toggle spinner"/>
<div id="my-spinner" class="display-icon" style="display: none"> <i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i> </div>
You may also add and remove an HTML element in DOM:
$(' <div id="my-spinner" class="display-icon"> <i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i> </div> ').appendTo('body');
$('#my-spinner').remove();