Untitled

<!doctype html>
<html>

<head>
    <title>jQuery Counter</title>
    <script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
</head>

<body>
    <h1>jQuery Counter </h1>
    <div id="logs" style="width:100%;"></div>
</body>
<script>
    var activeFlag;
    var resetInterVal;
    var activeTime = 0;
    
    function logActiveTime(){

        appendLogs("started ..");
        
        if(activeFlag){
            clearInterval(activeFlag);
        }

        //every second increze activity time by 1 second
        activeFlag = setInterval(function() {
            activeTime++;
            appendLogs("activeTime" + activeTime);
        },1000);

        //Reset setting and adding 10 min again
        resetCounting();
    }

    // Resetting timer if any activity in 10 Min.
    function resetCounting(){
        appendLogs("Timer Reset");

        if(resetInterVal){
            clearInterval(resetInterVal);
        }

        // For testing added 10 second to clear
        resetInterVal = setInterval(function() {
            clearActiveTime();
        },10000); // Replace by //600000
    }

    // clear all timer if there is no activity in 10 Min.
    function clearActiveTime(){
        if(activeFlag){
            clearInterval(activeFlag);
        }

        if(resetInterVal){
            clearInterval(resetInterVal);
        }
    }

    function appendLogs(title){
        var innerHtml = '';
        innerHtml += '<p>' + title + '</p>';
        console.log(title);
        $('#logs').append(innerHtml);
        window.scrollTo(0, document.body.scrollHeight);
    }

    $(document).bind("mousemove click", function(){
        //Resuming couting on activity 
        appendLogs("Click detected..");
        logActiveTime();
    });

    document.addEventListener("visibilitychange", (event) => {
        if (document.visibilityState == "visible") {
            logActiveTime();
        } else {
            clearActiveTime();
        }
    });

    //Start couting on page load 
    logActiveTime();
</script>

</html>
Editor is loading...