FlipClock

flipclock.markdown

FlipClock

A Pen by Jamie Wallace on CodePen.

License.

index.html

<div class="clock"></div>

script.js

// USE v0.7.8 of the JS plugin!!!

document.addEventListener("DOMContentLoaded", function() {
  var finishTime = new Date("08/09/2019 18:30");
  var now = new Date();
  var remainingTime = finishTime.getTime() - now.getTime();

    var clock = $('.clock').FlipClock(remainingTime / 1000,{
        clockFace: 'HourlyCounter',
        countdown: true
    });  
 });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/compiled/flipclock.min.js"></script>

style.css

/* USE v0.7.8 plugin CSS */

body {
  background-color: #2f234b;
}

.flip-clock-wrapper {
  margin: 2rem;
}

.flip-clock-divider .flip-clock-label {
  color: #c1bdc9;
  font-size: 1rem;
  text-align: center;
}

.flip-clock-wrapper ul {
  width: 30px;
  height: 60px;
  font-size: 20px;
  line-height: 87px;
}

.flip-clock-wrapper ul li {
  line-height: 60px;
}

.flip-clock-wrapper ul li a div div.inn {
  color: #2f234b;
  text-shadow: none;
  background-color: #e4e4e4;
  font-size: 45px;
}

.flip-clock-wrapper ul li a div.up:after {
  top: 28px;
  height: 1px;
}

.flip-clock-dot {
  background: #c1bdc9;
  width: 5px;
  height: 5px;
}

.flip-clock-dot.top {
  top: 30px;
}

.flip-clock-dot.bottom {
  bottom: 50px;
}

@media only screen and (min-width: 600px) {
  .flip-clock-wrapper ul {
    width: 60px;
    height: 90px;
    font-size: 80px;
  }
  .flip-clock-wrapper ul li {
    line-height: 87px;
  }
  .flip-clock-wrapper ul li a div div.inn {
    font-size: 70px;
  }

  .flip-clock-wrapper ul li a div.up:after {
    top: 44px;
    height: 3px;
  }
  .flip-clock-dot {
    width: 10px;
    height: 10px;
  }
  .flip-clock-dot.top {
    top: 30px;
  }
  .flip-clock-dot.bottom {
    bottom: 30px;
  }
}

styles

<link href="https://cdn.jsdelivr.net/npm/[email protected]/compiled/flipclock.min.css" rel="stylesheet" />