jQuery Runner test

by goldfingerxyz

HTML

<script src="https://raw.github.com/jylauril/jquery-runner/master/build/jquery.runner.js"></script>
  <div class="container">
      <input type="text" id="timer" name="timer" value="" readyonly="true"><br />
      <div style="margin:0 auto; width: 150px;">
          <div class="button" id="timerStart" style="display: inline;" >Start</div>
          <div class="button" id="timerStop" style="display: inline;" >Stop</div>
          <div class="button" id="timerReset" style="display: inline;" >Reset</div>
      </div>
  </div>

CSS

.container {
    margin: 20px auto;
    width: 190px;
    padding: 20px;
    display: block;
    height: 80px;
    border: 1px solid #ccc;
}

.container input {
    display: block;
    margin: 0 auto;
    width: 150px;
    height: 25px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    background-color: #2D2D2D;
    color: #fff;
}

.button {
    padding: 2px 7px;
    border: 1px solid black;
}

JavaScript

$(function() {
    $('#timer').runner({
        autostart: true
    });
    
    $('#timerStart').click(function() {
        $('#timer').runner('start');
    });
    
    $('#timerReset').click(function() {
        $('#timer').runner('reset');
    });
    
    $('#timerStop').click(function() {
        $('#timer').runner('stop');
    });
});