JSFiddle - React, Tailwind, and code Playground

by TheFiddler

HTML

<input type="text" id="txt" />
<div id="output-div"></div>

<div class="tabs">
  <!-- tabs -->
  <ul class="tabNavigation">
    <li><a href="#message" id="tab1">Tab1</a></li>
    <li><a href="#shareFile" id="tab2">Tab2</a></li>
    <li><a href="#arrange" id="tab3">Tab3</a></li>
  </ul>

  <!-- tab containers -->
  <div id="message">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div id="shareFile">
    <p>Sed do eiusmod tempor incididunt.</p>
  </div>
  <div id="arrange">
    <p>Ut enim ad minim veniam</p>
  </div>
</div>

JavaScript

//timer
var pagetime=1;
//interval var
var t;
//on/off boolean
var timer_is_on=0;
pagename="home";

function timedCount()
{
document.getElementById('txt').value=pagetime;
pagetime=pagetime+1;
t=setTimeout("timedCount()",1000);

}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}

function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}

function prePageTransition(){
    //before we transition, log previous page and time
    //if time is greater than 2 seconds we log it
    if (pagetime >2){
        //replace with local storage update
    document.getElementById('output-div').innerHTML += "You spent " + pagetime + " seconds on " + pagename;
        
        
    }
    //stop counting and reset
    stopCount();
    pagetime=1;
    }
    
function postPageTransition(){
    //after we transition start a new timer
    //alert("START");
    doTimer();
    
}

$(document).ready(function() {
    
   

    
    $('div.tabs ul.tabNavigation a').click(function () {
         
      //simulate the pagetransition events in mobile framework
         prePageTransition()  ;
        postPageTransition()  ;
        pagename= $(this).attr('id');        
        //alert("CLICK TO " + pagename);
    });
});