JSFiddle - React, Tailwind, and code Playground

by Gary Scott

HTML

<p> <span id="countdown">Initializing</span>

</p>
<p>
    <input type="text" />
</p>
<p>
    <input type="text" />
</p>
<p id="log"></p>

JavaScript

var sessionTimeoutMinutes = 0.5;

var sessionTimeoutMilliseconds = sessionTimeoutMinutes * 60 * 1000;


// set the date we're counting down to
var target_date = new Date().getTime() + (sessionTimeoutMilliseconds);

// variables for time units
var minutes, seconds, timer, myTimer;

// get tag element
var countdown = document.getElementById("countdown");

    // update the tag with id "countdown" every 1 second
    myTimer = setInterval(function () {

        // find the amount of "seconds" between now and target
        var current_date = new Date().getTime();
        var seconds_left = (target_date - current_date) / 1000;

        minutes = parseInt(seconds_left / 60);
        seconds = parseInt(seconds_left % 60);

        // format countdown string + set tag value
        countdown.innerHTML = minutes + "m, " + seconds + "s";

    }, 1000);


    timer = setTimeout(function () {

        // Stop the countdown
        clearInterval(myTimer);
        // Show Message
        countdown.innerHTML = "Session Expired";


    }, sessionTimeoutMilliseconds);



$('input').bind("change", function () {

    $('#log').html("changed at:" + new Date());
    
    // Reset the Timers here, somehow

});