Bootstrap Countdown

by Virneto

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js"></script>
<div class="container py-5">
    <!-- For demo purpose-->
    <header class="text-center">
        <h1 class="display-4 mb-4">Bootstrap Countdown</h1>
        <p class="font-italic text-muted mb-0">Using Bootstrap 4 and
            <a href="http://hilios.github.io/jQuery.countdown/" class="text-muted">
                <u>jQuery Countdown</u></a>, Build nicely styled countdowns.</p>
        <p class="font-italic text-muted">Snippet by
            <a href="https://bootstrapious.com" class="text-muted">
                <u>Bootstrapious</u>
            </a>
        </p>
    </header>


    <div class="py-5">
        <div class="row">
            <div class="col-lg-8 mx-auto">

                <!-- Countdown 1-->
                <div class="rounded bg-gradient-1 text-white shadow p-5 text-center mb-5">
                    <p class="mb-4 font-weight-bold text-uppercase">New year's eve in</p>
                    <div id="clock-b" class="countdown-circles d-flex flex-wrap justify-content-center pt-4"></div>
                </div>

                <!-- Countdown 2-->
                <div class="rounded bg-gradient-2 text-white shadow p-5 text-center mb-5">
                    <p class="mb-0 font-weight-bold text-uppercase">Limited Time Only!</p>
                    <div id="clock-a" class="countdown pt-4"></div>
                </div>

                <!-- Countdown 3-->
                <div class="rounded bg-gradient-3 text-white shadow p-5 text-center mb-5">
    ...

CSS

/*
*
* ==================================================
* UNNECESSARY STYLE - JUST TO MAKE IT LOOKS NICE
* ==================================================
*
*/
.countdown {
    text-transform: uppercase;
    font-weight: bold;
}

.countdown span {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 3rem;
    margin-left: 0.8rem;
}

.countdown span:first-of-type {
    margin-left: 0;
}

.countdown-circles {
    text-transform: uppercase;
    font-weight: bold;
}

.countdown-circles span {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.countdown-circles span:first-of-type {
    margin-left: 0;
}


/*
*
* ==================================================
* FOR DEMO PURPOSES
* ==================================================
*
*/
body {
    min-height: 100vh;
}

.bg-gradient-1 {
    background: #7f7fd5;
    background: -webkit-linear-gradient(to right, #7f7fd5, #86a8e7, #91eae4);
    background: linear-gradient(to right, #7f7fd5, #86a8e7, #91eae4);
}

.bg-gradient-2 {
    background: #654ea3;
    background: -webkit-linear-gradient(to right, #654ea3, #eaafc8);
    background: linear-gradient(to right, #654ea3, #eaafc8);
}

.bg-gradient-3 {
    background: #ff416c;
    background: -webkit-linear-gradient(to right, #ff416c, #ff4b2b);
    background: linear-gradient(to right, #ff416c, #ff4b2b);
}

.bg-gradient-4 {
    background: #007991;
    background: -webkit-linear-gradient(to right, #007991, #78ffd6);
    background: linear-gradient(to right, #007991, #78ffd6);
}

.rounded {
    border-radius: 1rem !important;
}

.btn-demo {
    padding: 0.5rem 2rem !important;
    border-radius: 30rem !important;
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
    text-transform: uppercase;
    font-weight: bold !important;
}

.btn-demo:hover, .btn-demo:focus {
    color:...

JavaScript

$(function () {


    /* =========================================
        COUNTDOWN 1
     ========================================= */
    $('#clock').countdown('2021/1/10').on('update.countdown', function(event) {
      var $this = $(this).html(event.strftime(''
        + '<span class="h1 font-weight-bold">%D</span> Day%!d'
        + '<span class="h1 font-weight-bold">%H</span> Hr'
        + '<span class="h1 font-weight-bold">%M</span> Min'
        + '<span class="h1 font-weight-bold">%S</span> Sec'));
    });

    /* =========================================
        COUNTDOWN 2
     ========================================= */
    $('#clock-a').countdown('2021/1/10').on('update.countdown', function(event) {
      var $this = $(this).html(event.strftime(''
        + '<span class="h1 font-weight-bold">%w</span> week%!w'
        + '<span class="h1 font-weight-bold">%D</span> Days'));
    });

    /* =========================================
        COUNTDOWN 3
     ========================================= */
    $('#clock-b').countdown('2021/1/1').on('update.countdown', function(event) {
      var $this = $(this).html(event.strftime(''
        + '<div class="holder m-2"><span class="h1 font-weight-bold">%D</span> Day%!d</div>'
        + '<div class="holder m-2"><span class="h1 font-weight-bold">%H</span> Hr</div>'
        + '<div class="holder m-2"><span class="h1 font-weight-bold">%M</span> Min</div>'
        + '<div class="holder m-2"><span class="h1 font-weight-bold">%S</span> Sec</div>'));
    });


    /* =========================================
        COUNTDOWN 4
     ========================================= */
    function get15dayFromNow() {
        return new Date(new Date().valueOf() + 15 * 24 * 60 * 60 * 1000);
    }

    $('#clock-c').countdown(get15dayFromNow(), function(event) {
      var $this = $(this).html(event.strftime(''
        + '<span class="h1 font-weight-bold">%D</span> Day%!d'
        + '<span class="h1 font-weight-bold">%H</span>...