Jquery or Javascript Start Exam Time

 <script>

function startTimer() {
    var date = "<?php echo $date ?>"; // dynamic date
    var time = "<?php echo $time ?>"; // dynamic time current time to 40 minutes (example)
    var startTime = new Date(date);
    var endTime = new Date(startTime.getTime() + time * 60000);

    console.log(date + " " + time);
        var timerInterval = setInterval(function() {
        var remainingTime = endTime - new Date();
        if (remainingTime <= 0) {
                clearInterval(timerInterval);
                $('#examTime').text('Time\'s up!');
                $('#timeUpModal').modal('show');
            // auto Submit Form
            setTimeout(() => {
                    submitForm();
                }, 7000);
} else {
        var minutes = Math.floor((remainingTime / (1000 * 60)) % 60);
        var seconds = Math.floor((remainingTime / 1000) % 60);
        minutes = (minutes < 10 ? '0' : '') + minutes;
        seconds = (seconds < 10 ? '0' : '') + seconds;
        $('#examTime').text('Time Remaining: ' + minutes + ':' + seconds);
        }
    }, 1000);
}

startTimer();

function submitForm()
{
        // if you use this method can you check (name='submit') --> change name submit1 or else any words
        document.getElementById('objForm').submit();
}
</script>

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>