JSFiddle - React, Tailwind, and code Playground

by Peter Doyle

HTML

<script src="//code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">

<div class="header" data-role="navbar" >
        <ul>
            <li>   
                <a href="#leftpanel" data-icon="grid" data-theme="b" data-iconpos="right" ></a>
            </li>
            <li>
                <a href="#" data-icon="star" data-iconpos="right" data-theme="b"></a>
            </li>
        </ul>
    </div><!-- /navbar -->


<div class="center-wrapper">
    <div class="bg-color"></div>
    <div class="timer"></div>

    <button class="stopTimer ui-btn ui-btn-inline ui-btn-b">Stop timer</button>
</div>

 <div class="footer" data-role="navbar" data-grid="d">
        <ul>
            <li>    
<a href="#" class="startTimer" data-seconds="50" data-theme="b">
    50
</a>
                 </li>
            <li>
<a href="#" class="startTimer" data-seconds="40" data-theme="b">
    40
</a>
                 </li>
            <li>
<a href="#" class="startTimer" data-seconds="30" data-theme="b">
    30
</a>
                 </li>
            <li>
<a href="#" class="startTimer" data-seconds="20" data-theme="b">
    20
</a>
                 </li>
            <li>
<a href="#" class="startTimer" data-seconds="5" data-theme="b">
    5
</a>
                 </li>
            <li>
                 </li>
        </ul>
    </div><!-- /navbar -->



<div data-theme="a" data-display="overlay" data-position="left" id="leftpanel" data-role="panel" class="ui-panel ui-panel-position-left ui-panel-display-overlay ui-body-a ui-panel-animate ui-panel-open">

        <div class="ui-panel-inner"><h3>Left Panel: Overlay</h3><p>This panel is positioned on the left with the overlay display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p><p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p><a class="ui-btn...

CSS

.bg-color{ 
    position: absolute; 
    height:0%;
    width:100%;
    background:#cc5500;
    bottom:0;
    z-index:0;
}
body{ background:#333; }

.timer{ 
    z-index:999;
    color:#000;
    position:relative;
    text-align:center; 
    padding:15%;
    font-size:45px;
    font-family:sans-serif;
}


.center-wrapper{ 
    position:relative;
    width:100%;
    height:100%;
}

.stopTimer{ 
    display:none;
    position:absolute !important;
    bottom:0;
    left:50%;
    margin-left:-60px;
}

#leftpanel{ z-index:999; }

JavaScript

var counter=setInterval(timer, 1000); //1000 will  run it every 1 second
clearInterval(counter);
var count = 5;

$(document).ready(function() {
    centerHeight();
    startTimer();
    stopTimer();
});


function centerHeight(){
    var windowheight = $(window).height();
    var headerheight = $(".header").height();
    var footerheight = $(".footer").height(); 
    var newHeight = windowheight -(headerheight+footerheight);
    
    $(".center-wrapper").height(newHeight)
}


function startTimer(){
    $(".startTimer").on("click",function(){
        var newTime = parseInt($(this).attr("data-seconds"));
        restartTimer(newTime);
        $(".timer").text(newTime + " secs");
        $(".bg-color").stop();
        $(".bg-color").css("height","0%");
        $(".bg-color").animate({height:"100%"},(newTime*1000))
        $(".stopTimer").show();        
    })
}

function restartTimer(time){
    count=time;
    clearInterval(counter);    
    counter=setInterval(timer, 1000);
}
function stopTimer(){

    $(".stopTimer").on("click",function(){
        clearInterval(counter);
        $(".bg-color").stop();
        $(".bg-color").animate({height:"0%"},(1000));
                $(".stopTimer").hide();        

    });
}

function timer(){
 if (count <= 0) {
     clearInterval(counter);
     $(".stopTimer").hide();        
     return;
  }
  count=count-1;
   $(".timer").text(count + " secs");
}