JSFiddle - React, Tailwind, and code Playground

by floor_

HTML

<div>
    <div id="timer">
        <p><span id="min2"></span><span id="min"></span><span id="sec"></span><span id="mil"></span></p>
    <button id="record-time">Click Me</button>
    <ul id="time-stamp">
    </ul>
</div>

JavaScript

$(document).ready(function() {
    console.log( "ready!" );
    var totalTime = 100000;
    var currentTime = 0;
    var min2 = $('#min2');
	var min = $('#min');
    var sec = $('#sec');
    var mil = $('#mil');
    setUp();
    
    
    function setUp() {
    	min2.text("1");
        min.text("0");
        sec.text("0");
        mil.text("0");
    }
    
    function timer() {
        if(currentTime === 0) {
            min2.text("0");
        }
        currentTime = currentTime + 100;
        if(currentTime === totalTime) {
            clearTimeout(clock);
        }
       // console.log(currentTime);
        setDisplay();
    }
    
    function setDisplay() {
    	var timeLeft = (totalTime - currentTime) / 100;
        var digits = (""+timeLeft).split("");
        min.text(digits[0]);
    	sec.text(digits[1]);
    	mil.text(digits[2]);
    }
    
    $('#record-time').on('click', function() {
        var timeLeft = (totalTime - currentTime) / 100 ;
    	$('#time-stamp').append('<li>'+timeLeft+'</li>');
        currentTime = 0;
        setUp();
    });

    //1000
    var clock = setInterval(timer, 100);
});