JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

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

<div id="exdata">
    <article id="1">
        <header>
             <h1 class="exnum">Exhibit 1</h1>

        </header>
        <div class="exopened" style="display:none;"></div>
    </article>
    <article id="2">
        <header>
             <h1 class="exnum">Exhibit 2</h1>

        </header>
        <div class="exopened" style="display:none;"></div>
    </article>
    <article id="3">
        <header>
             <h1 class="exnum">Exhibit 3</h1>

        </header>
        <div class="exopened" style="display:none;"></div>
    </article>
</div>

CSS

.exactive {
    background: lime;
}

JavaScript

//timer
var exhibitLaptime=1;
//interval var
var t;
//on/off boolean
var timer_is_on=0;


function timedCount()
{
document.getElementById('exseconds').value=exhibitLaptime;
exhibitLaptime=exhibitLaptime+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 (exhibitLaptime >5){
        //replace with local storage update
    document.getElementById('output-div').innerHTML = "You spent " + exhibitLaptime + " seconds on " + article;
        $("#exdata").append("<span id='" + articleid + "'>" + article + " </span><span id='" + articleid + "time'>" + exhibitLaptime + "</span><br>");  
        
    }
    //stop counting and reset
    stopCount();
    exhibitLaptime=1;
    }
    
function postPageTransition(){
    //after we transition start a new timer
    //alert("START");
    doTimer();
    
    
}

$(document).ready(function() {

    $('article').click(function () {
        jQuery(this).toggleClass("exactive");
      //simulate the pagetransition events in mobile framework
        if(jQuery(this).hasClass("exactive")){
         prePageTransition()  ;
        postPageTransition()  ;
        article = $(this).find(".exnum").html(); 
        articleid = $(this).find(".exnum").html().replace(/ /g,'');
        } else {
            stopCount(); 
            prePageTransition()  ;
            saveEventRecord()  ;
            
        }

    });
    
    function saveEventRecord(){
    
    alert("saveEventRecord");
    }    
    
});