count down

In this example below you will see how to do a count down with some HTML / CSS and Javascript

angular clock

Thumbnail
This awesome code was written by 1bladesforhire, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1bladesforhire ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>count down</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3">
      <button class="btn btn-primary" id="plus">+</button>
    </div>
    <div class="col-xs-6">
      <div class="display">
        <div class="display-inner slideInUp"><span id="value" value="25"></span></div>
      </div>
    </div>
    <div class="col-xs-3">
      <button class="btn btn-primary" id="minus">-</button>
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/1bladesforhire/count-down-pgNEjW */
.display {
  background: #ffffff;
  width: 200px;
  height: 200px;
  border: 2px solid #225500;
  border-radius: 50%;
}


/*Downloaded from https://www.codeseek.co/1bladesforhire/count-down-pgNEjW */
var timer = $('#value').val();
//alert(timer);
$(document).ready(function(){
  $('#value').text($(this).val());
  //alert($('#value').val())
});
                  
$('#minus').click(function(){
   timer = timer -1;
});
$('#plus').click(function(){
  timer = timer + 1;
});

Comments