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 activeTimeTimer;
    var resetIntervalTimer;
    var activeTime = 0;
    
    function logActiveTime(){

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

        //every second increze activity time by 1 second
        activeTimeTimer = 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(resetIntervalTimer){
            clearInterval(resetIntervalTimer);
        }

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

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

        if(resetIntervalTimer){
            clearInterval(resetIntervalTimer);
        }
    }

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

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

    //Bind Event for browser backgound
    $(window).bind("blur", function() {
        appendLogs("backgound detected..");
        clearActiveTime();
    });

    //Bind Event for browser forground
    $(window).bind("focus", function() {
        appendLogs("forground detected..");
        logActiveTime();
    });

    //Bind Event for browser visitbility change
    document.addEventListener("visibilitychange", (event) => {
        if (document.visibilityState == "visible") {
            appendLogs("visitbility change to active..");
            logActiveTime();
        } else {
            appendLogs("visitbility change to inactive..");
            clearActiveTime();
        }
    });

    //when you switch tab call clearActiveTime (take activeTime here ex : 60) and resetActiveTime (it will set activeTime to zero) Function.
    // And again start (logActiveTime) on new Tab (for ex : Overview to Location)
    function resetActiveTime(){
        activeTime = 0;
    }

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

</html>
Editor is loading...