Some Timer

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

Test timer with tick and alert sounds.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Some Timer</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

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

  
</head>

<body>

  <div class="container">
  
  <div class="form-container">
    <form>
      <input id="timerValue" type="number" max="60" min="1" value="10"><span> secs.</span>
    </form>
  </div>

    <p class="label">
      <span>START/PAUSE</span>
      <span>STOP</span>
    </p>
  
  <div class="btn-container">
     <button class="btn btn-start" id="start"></button>
     <button class="btn btn-reset" id="reset"></button>
  </div>
  
  <div class="stopwatch-main">
    <div class="stopwatch-sec">
      <div class="line-design"></div>
      <div class="line-design2"></div>
      <div class="timer-container">
        <span id="timer" style="font-size: 50px; color: red"></span>
      </div>
      <p class="textwatch">Some Timer App</p>
      <p><i class="fa fa-volume-up"></i></p>
    </div>
  </div>
  
  <div class="snd-container">
    <p><i class="fa fa-volume-up"></i></p>
  </div>
  
</div>
  <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/codefly0817/some-timer-merVGb */
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');

body {
  text-align: center;
  background-color: pink;
}

.btn-container {
  margin: -1.6em 0 1em;
}

.btn-start {
  background-color: #0066FF;
}

.btn-reset {
  background-color: #FF3030;
}

.form-container {
  margin: 1em;
}

.stopwatch-sec {
  position: relative;
  display: inline-block;
  background-color: #111;
  width: 11em;
  height: 11em;
  margin: .5em 0 1em;
  border-radius: 70px;
  overflow: hidden;
  border: solid 2px white;
  top: 5px;
}

.stopwatch-main {
  position: relative;
  display: inline-block;
  background-color: #111;
  width: 13em;
  height: 13em;
  border-radius: 60px;
  box-shadow: 5px 5px 8px black;
  margin-bottom: 2em;
  border: solid 2px #222
}

.timer-container {
  position: absolute;
  top: 3em;
  left: 1.5em;
  border: solid 2px #fff;
  background-color: black;
  height: 3.8em;
  width: 8em;
  border-radius: 20px;
}

.line-design {
  display: inline-block;
  position: absolute;
  background-color: red;
  width: 11em;
  height: 1em;
  top: 5.5em;
  left: 0;
  opacity: .7;
}

.line-design2 {
  display: inline-block;
  position: absolute;
  background-color: red;
  width: 11em;
  height: 1em;
  top: 3.4em;
  left: 0;
  opacity: .7;
}

#timer {
  line-height: 1.1em;
}


.fa {
  display: block;
  font-size: 20px;
  width: 50px;
  height: 22px;
  line-height: 22px;
  cursor: pointer;
  color: white;
  opacity: .6;
  margin-left: 50px;
}

.fa:hover {
  opacity: .8;
}

.fa-volume-off {
  margin-left: 40px;
  width: 60px;
}

.alertmsg {
  margin: 1em 0 1em;
}

.btn {
  margin: 0 15px -50px 15px;
  height: 30px;
  opacity: .8;
}

.btn:hover {
  opacity: 1;
}

.label span {
  font-size: 8px;
  margin-right: 14px;
  color: #111;
}

.textwatch {
  margin-top: 100px;
  margin-bottom: 4px;
  font-size: 1em;
  color: white;
  opacity: .6;
}

/*Downloaded from https://www.codeseek.co/codefly0817/some-timer-merVGb */
var test = false, timertest = 0, timerActive, playOnce = false, muteSound = false, pushButton = false;

var audioElement1 = document.createElement('audio');
var audioElement2 = document.createElement('audio');
var audioElement3 = document.createElement('audio');
audioElement1.setAttribute('src', 'http://www.threecaster.com/wavy/WARNING1.wav');
audioElement2.setAttribute('src', 'http://www.wavlist.com/soundfx/020/clock-tick1.wav');
audioElement3.setAttribute('src', 'http://www.piclist.com/images/com/bubblesoftonline/www/http/pocket/pocket/inst/chin.wav');

audioElement1.addEventListener("load", function() {
  audioElement1.play();
}, true);
audioElement2.addEventListener("load", function() {
  audioElement2.play();
}, true);
audioElement3.addEventListener("load", function() {
  audioElement3.play();
}, true);

//SHOW TIMER ON START
$(document).ready(function() {
  showTimerTest();
  
});

    function showTimerTest() {
      $('#timer').html(timertest);
    }


//TIMER START
  $('#start').click(function() {
    $('#timerValue').prop('disabled', true); //disable input when timer is active
    audioElement3.play();
    pushButton = false;
   if(test) {
      test = false;
      clearInterval(timerActive);
      $(this).animate({ 
        marginBottom: '-=5px'
      }, 300);
      $(this).animate({
        marginTop: '-=10px'
      }, 300);
   } else {
      test = true;
      pushButton = true;
      $(this).animate({
        marginBottom: '-=10px'
      }, 300);
      $(this).animate({
        marginTop: '-=5px'
      }, 300);
      timerActive = setInterval(function() {
       if(timertest > 0) {
         timertest--;
         //play sound each second except when 0
         if(timertest > 0) {
           if(muteSound == false) {
          audioElement2.play();
           }
         }
       } else {
         var newTime = $('#timerValue').val();
         timertest = newTime;
       }

        
        if(timertest == 0) {
          //play warning sound once    
          if(playOnce == false) {
            audioElement1.play();
            playOnce = true; 
          }
          alert('TIME\'S UP!');
          resetTimer();
        }
        
        showTimerTest();
     }, 1000);
   }   
  })
  
  //reset button
  $('#reset').click(function() {
    resetTimer();
    showTimerTest();
    
  });
      
    function resetTimer() {
      $('#timerValue').prop('disabled', false); //enable input
      audioElement3.play();
      test = false;
      playOnce = false;
      clearInterval(timerActive);
      timertest = 0;
      $('#reset').animate({ 
        marginBottom: '-=10px'
      }, 300);
      $('#reset').animate({
        marginTop: '-=10px'
      }, 300);
      if(pushButton == true) {
      pushButton = false;
      $('#start').animate({
        marginTop: '-=5px'
      }, 300); 
    }
    }

//TOGGLE SOUND BUTTON
$('.fa').click(function() {
  
  if(muteSound) {
    muteSound = false;
    $(this).removeClass('fa-volume-off');
    $(this).addClass('fa-volume-up');
  } else {
    muteSound = true;
    $(this).removeClass('fa-volume-up');
    $(this).addClass('fa-volume-off');
  }
  
});


$('#timerValue').keypress(function(e) {
  e.preventDefault();
});

Comments