Countdown Timer

Countdown Timer With Progress Bar.

by Craig Haywood

HTML

<section class='nav'><br><h1>Nav</h1></section>
<section class='content'></section>
  <footer><div class="footercontainer"><div class="messaging">
Use Coupon Code <span id="coupon">FAST20FRZ</span> To Instantly<br/>Save $20 Before The Timer Runs Out
</div>
    <div class="countwrapper">
<div id="counter">
<div id="progressBar" class="tiny-green"><span id="seconds"></span><div></div></div>
</div></div>
  </footer>

CSS

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

p {
  text-align: left;
  padding: 0 20px;
}
#coupon{color: #ff0066}
code {
  color: firebrick;
}

footer2 {
  background: yellow;
  padding: 0px;
  text-align: center;
  position: fixed;
  width: 100%;
  bottom: 0;
  box-sizing: border-box;
  display: none
}
.footercontainer{
  Max-width: 780px;
  content-align: center;
  margin: auto
}



@media (max-width: 800px) {
  .footercontainer{
    Max-width: 480px;
  content-align: center;
  margin: auto}
  

  .countwrapper {clear: left;
  max-width: 480px;
  content-align: center;
  margin-left: 20% ! important}
}


  
 .countwrapper{
   position: relative;
   width: 300px;
   margin: auto;
     float: left;
  min-width: 300px;
   margin-top: 8px
 }
.img-message {
  display: none;
  text-align: center;
}
.tiny-green {
    position: relative;
    padding: 3px;
width: 300px;
	background: #000000;

	-moz-border-radius: 999px; /* Firefox */
	-webkit-border-radius: 999px; /* Webkit */
	border-radius: 999px;
}
.tiny-green div {

	font-family: arial;
	font-size: larger !important;
	height:30px;
	color: white;
	text-align: right;
	text-shadow: 0px 0px 2px #000;
	text-indent: 9999px;
	overflow: hidden;
background: #ff0066;

	

	-moz-border-radius: 999px; /* Firefox */
	-webkit-border-radius: 999px; /* Webkit */
	border-radius: 999px;
}
#counter #progressBar #seconds {
	width:100%;
	position: absolute;
	text-align: center;
	color:#FFF;
  font-size: 16px !important;
  font-family: arial;
  margin-top: 5px
}
#seconds {margin-left: -150px}
.messaging {
  font-family: arial;
  text-align: center;
   margin-top: 8px;
   font-weight: bold;
  float: left;
  min-width: 480px
}

JavaScript

var sec = 1500;
var txt = " Seconds Left";
var timer = setInterval(function() {
  $('#counter span').text(sec-- + txt);
  progressBar(sec, $('#progressBar'));
  if (sec == -1) {
    $('#counter').fadeOut('fast');
    clearInterval(timer);
    document.querySelector(".messaging").style.display = "none";
    document.querySelector(".img-message").style.display = "block";
  }
}, 1000);

function progressBar(percent, $element) {
  var progressBarWidth = percent * $element.width() / 1500;
  $element.find('div').animate({
    width: progressBarWidth
  }, 800).html(percent);
}

let footerVisible = false;
var docHeight = 0;

$(window).scroll(function() {
   var scrollPos = $(window).scrollTop() + $(window).height();
   if(footerVisible == false){docHeight = $(document).height()}
   
   if(scrollPos >= docHeight / 2){
    footerVisible = true;
    $('footer').css('display', 'table');
   }
});