JSFiddle - React, Tailwind, and code Playground

by giuseppe straziota

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
    <script>
        var startValue = 1000; //Number of milliseconds
        var time = new Date(startValue);
        var interv;
        $(function(){
            displayTime();
						
            $(".start").on("click", function(){
            interv = setInterval(function(){                
								time.setSeconds(time.getSeconds() + 1);
                displayTime();
            }, 1000);
            });
            $(".stop").on("click", function(){
                clearInterval(interv);
                time = new Date(startValue);
                displayTime();
            });
            $(".pause").on("click", function(){
                clearInterval(interv);
            });
            $(".reset").on("click", function(){
                time = new Date(startValue);
                displayTime();
            });
        });

        function displayTime(){
				debugger;
            $(".time").text(fillZeroes(time.getMinutes()) + ":" + fillZeroes(time.getSeconds()));
        }

        function fillZeroes(t){
            t += "";
            return t.length==1? "0" + t : t;
        }
    </script>
 
<a href="#" class="start">start</a>
<a href="#" class="stop">stop</a>
<a href="#" class="pause">pause</a>
<a href="#" class="reset">reset</a>
<div class="time"></div>

CSS

a{
        margin: 0 10px;
        color: gray;
        }
        .time{
            font-size: 50px;
            margin: 20px;
            font-family: monospace;
        }