JQuery Custom Rating

 <style>

.rating {

  font-size: 24px;

}

.star {

  cursor: pointer;

  color: gray;

}

.star:hover,

.star.active {

  color: rgb(255, 207, 0);

}

</style>

<div class="form-group">

                                            <p class="mg-b-10" id="leadRatingTxt">Lead Rating (<?= $lead_rating ? $lead_rating: 0 ?>)<span class="text-danger">*</span></p> 

                                            <div class="rating">

                                                <span class="star" data-value="1">&#9733;</span>

                                                <span class="star" data-value="2">&#9733;</span>

                                                <span class="star" data-value="3">&#9733;</span>

                                                <span class="star" data-value="4">&#9733;</span>

                                                <span class="star" data-value="5">&#9733;</span>

                                                <span class="star" data-value="6">&#9733;</span>

                                                <span class="star" data-value="7">&#9733;</span>

                                                <span class="star" data-value="8">&#9733;</span>

                                                <span class="star" data-value="9">&#9733;</span>

                                                <span class="star" data-value="10">&#9733;</span>

                                            </div>

                                            <input type="hidden" id="lead_rating"  name="lead_rating" value="" />

                                              @error('lead_rating')

                                            <span class="text-danger">{{ $message }}</span>

                                            @enderror

                                        </div>

                                    </div>

Script:

var selectedRating = 0;

<?php if(isset($lead_rating) && $lead_rating > 0){ ?>

    highlightStars('<?= $lead_rating ?>')

<?php } ?>

$('.star').on('mouseover', function() {

  var value = $(this).data('value');

  highlightStars(value);

});

$('.star').on('mouseout', function() {

  highlightStars(selectedRating);

});

$('.star').on('click', function() {

  selectedRating = $(this).data('value');

  $('#leadRatingTxt').text("Lead Rating ("+selectedRating+")");

  $('#lead_rating').val(selectedRating);

});

function highlightStars(count) {

  $('.star').removeClass('active');

  $('.star:lt(' + count + ')').addClass('active');

}

HTML ,CSS & Javascript Using Simple Popup Box

JAVASCRIPT USING POPUP

What is Popup?

Popup is GUI Component GUI-> Graphical User Interface .Your Website Window suddenly Visible to the Foreground to user ex search

The any website through internet suddenly appears to your foreground

Contact or Register form 

       

Open Your IDE 

Write Your Coding and then Open your web browser

Run the html file

<html>

<head>

<style>

#main{

background-color:#A9A9A9;

height:100%;

width:100%;

position:relative;

}

#sub{

background-color:#F0FFFF;

height:10%;

width:20%;

display:none;

}

.spn{

font-size:25px;

float:right;

opacity:0.5;

}

.spn:hover{

    cursor: pointer;

}

.fm {

padding-top: 13%;

padding-left: 39%;

}

.fa-soundcloud {

    color: #e8822d;

  }

  .fa-soundcloud:hover,

  .fa-soundcloud:focus {

    text-decoration: none;

    color: #cc6916;

  }

  .fa-pinterest {

    color: #bd091f;

  }

  .fa-pinterest:hover,

  .fa-pinterest:focus {

    text-decoration: none;

    color: #8c0717;

  }

  .fa-vimeo {

    color: #17b3e8;

  }

  .fa-vimeo:hover,

  .fa-vimeo:focus {

    text-decoration: none;

    color: #128fba;

  }

  .fa-behance {

    color: #2c98cf;

  }

  .fa-behance:hover,

  .fa-behance:focus {

    text-decoration: none;

    color: #2379a5;

  }

  .fa-codepen {

    color: #1c1c1c;

  }

  .fa-codepen:hover,

  .fa-codepen:focus {

    text-decoration: none;

    color: #020202;

  }

  .fa-foursquare {

    color: #fa4778;

  }

  .fa-foursquare:hover,

  .fa-foursquare:focus {

    text-decoration: none;

    color: #f91554;

  }

  .fa-facebook {

    color: #4b6daa;

  }

  .fa-facebook:hover,

  .fa-facebook:focus {

    text-decoration: none;

    color: #3b5687;

  }

  .fa-angellist {

    color: #000000;

  }

  .fa-angellist:hover,

  .fa-angellist:focus {

    text-decoration: none;

    color: #000000;

  }

  .fa-bitbucket {

    color: #205081;

  }

  .fa-bitbucket:hover,

  .fa-bitbucket:focus {

    text-decoration: none;

    color: #163758;

  }

  .fa-google-plus {

    color: #bf2a1d;

  }

  .fa {

    color: #0594f3;

}

  .fa-google-plus:hover,

  .fa-google-plus:focus {

    text-decoration: none;

    color: #932016;

  }

  .background-card h4 {

    font-variant: small-caps;

    color: #777777;

    border-bottom: 1px solid #eeeeee;

    padding-bottom: 1em;

    margin-bottom: 1em;

    line-height: 1.2;

  }

  .background-card h4:not(:first-child) {

    margin-top: 2em;

  }

  h4 > .fa,

  h4 > .title {

    display: inline-block;

    vertical-align: baseline;

    color: #000000c7;

    font-weight: 600;

  }

  h4 > .fa {

    width: 4rem;

  }

  .content {

    line-height: 1.5;

  }

  .card {

    background: #ffffff;

    border: 1px solid #e6e6e6;

    border-radius: 3px;

    padding: 2em 3.5em;

    box-shadow: 0px 3px 20px -10px;

  }

  .card-nested {

    padding: 1.5rem 0 1.5rem 4.2rem;

  }

  .card-wrapper {

    padding: 5px;

  } 

</style>

<script>

function sd(){

var inp=document.getElementById('nm').value;

document.getElementById('pa').innerHTML=inp;

document.getElementById('nm').value="";

document.getElementById('sub').setAttribute("style","display:block;position:absolute;top:15px;left:55px;opacity:0.3;transition:display 5s;");

}

function cls(){

document.getElementById('sub').style.display="none";

}

</script>

</head>

<body>

<div id="main">

<div class="fm">

name<input type="text" required id="nm"><br>

<button onclick="sd();" id="snd">send</button>

</div>

 <div id="sub">

 <span onclick="cls();" class="spn">&times;</span>

 <p id="pa">    Mail send success fullly</p>

 </div>

</div>

</body>

                                                                         </html>