Clickcounter with timeout hundredths of seconds

This code is an example of my ATimer class added to the code of one of the jQuery forum's users' . The hundredths of seconds are updated every 20mS because the user will not perceive anything faster (biological constraints, and screen refresh rate constraint)

by jarosciak

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<html>

<head>
  <meta charset="UTF-8">
  <title>Mati's Click Counter</title>
  <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>  
</head>

<body>




  <div class="main">
  
    

    <h3>Matias's Click Counter</h3>
    <button id="clickme">0</button>
    <center>
    
<div id="CountDownPanel"></div>
    </center>
    </div>
</body>

</html>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif;
  font-size: 40pt;
  font-weight: normal;
  background: lightyellow; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(
    -90deg,
    lightyellow,
    grey
  ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(
    -90deg,
    lightyellow,
    grey
  ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(
    -90deg,
    lightyellow,
    grey
  ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(-90deg, lightyellow, grey); /* Standard syntax */
}

.main {
  margin: 100px auto;
  text-align: center;
}

button {
  padding: 40px;  
  font-family: "Lato", sans-serif;
  font-size: 60pt; that has all aws changes
  border: 1px solid lightblue;
  color: darkgreen;
}

.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-fymr{border-color:inherit;font-weight:bold;text-align:left;vertical-align:top}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}

#CountDownPanel {
    height: 200px;
    width: 200px;
}
.warn { color: red; }

JavaScript

var button2 = document.getElementById("clickme"),
  counter = 0;
button2.onclick = function() {
	if (counter==0) {	
  doStart();  
  }
  counter += 1;
  button2.innerHTML = counter;
};


  $("#submit, #close").click(function() {
        // Validation
        var form = $("#inputs")

        if (form[0].checkValidity() === false) {
            event.preventDefault()
            event.stopPropagation()
        }
        form.addClass('was-validated')

        //Declare and initialize variable for display inputs in div
        var code = "";
        $("#inputs").each(function() {
            var text1 = $(this).find("#firstname").val();
            var text2 = $(this).find("#lastname").val();
            code += text1 + " " + text2;
        });

        $("#results").html(code);
        
    });


var WARNING_THRESHOLD = 1 * 2 * 1000; 

function doStart() {
    var id = "CountDownPanel";
    var i = 5; //duration in seconds (10 minutes)
    ActivateCountDown(id, i);
}

function ActivateCountDown(strContainerID, initialValue) {
    var _countDownContainer = document.getElementById(strContainerID);
    var $_countDownContainer;

    if (!_countDownContainer) {
        alert("count down error: container does not exist: " + strContainerID +
                "\nmake sure html element with this ID exists");
    } else {
        $_countDownContainer = $(document.getElementById(strContainerID));
        //the ATimer below works with time values in milliseconds  //the "20" will update display ever 20 milliseconds, as fast as screen refreshes
                $_countDownContainer.removeClass("warn");
        var timerID = new ATimer(initialValue * 1000, 10, CountDownComplete, CountDownTick);
        timerID.start();
    }

    function CountDownComplete() {
        
         
        
 
  alert("Your time has expired! Clicks: " + counter);
        counter = 0;
        button2.innerHTML = counter;
         $_countDownContainer.removeClass("warn");
        ...