JSFiddle - React, Tailwind, and code Playground

by QMaster

HTML

<!--<h1><time>00:00:00</time></h1>-->

<!--
<button id="start">start</button>
<button id="stop">stop</button>
<button id="clear">clear</button>
<button id="lap">lap</button>
-->
<!--
<nav>
<a href="#" id="hNextAct" class="button">Next Activity</a>
<a href="#" id="hStart" class="button">Start</a>
<a href="#" id="hLap" class="button">Lap</a>
<a href="#" id="hStop" class="button">Stop</a>
<a href="#" id="hClear" class="button">Restart</a>
    
</nav>
<br />
<div id="result">Lap</div>

<nav>
    <div>Work</div>
    <div id="workResult"></div>
</nav>

<nav>
    <div>Rest</div>
    <div id="restResult"></div>
</nav>

-->

<div class="divider"></div>

<div class="headerContainer80UIBase">
    <div class="DataTileContainerUI0">
        <div class="dataTileLeftDivHandleUI">
            <img src="http://cdn.portableapps.com/TaskCoachPortable_128.png" style = "width: 80px; height: 80px; display: inline-block;"/>
        </div>
        <a href="#" id="workTile1" class="attachDeact">
                    <div class="upWrapper">
                        <!--
                        <div class="upLeftWrapper">
                            up left
                        </div>
                        <div class="upRightWrapper">
                            up right
                        </div>
                        -->
                        <h1><work1>00:00:00</work1></h1>
                    </div>
                    <div id="workDW1" class="downWrapper">
                        
                    </div>
        </a>
            
    </div>        
</div>

<div class="divider"></div>

<div class="headerContainer80UIBase">
    <div class="DataTileContainerUI0">
        <div class="dataTileLeftDivHandleUI">
            <img src="http://cdn.portableapps.com/TaskCoachPortable_128.png" style = "width: 80px; height: 80px; display: inline-block;"/>
        </div>
        <a href="#" id="workTile2" class="attachDeact">
                    <div class="upWrapper">
                ...

CSS

* {
  margin: 0;
  padding: 0;
}

html {
  background: #333;
  color: lime;
  font-family: Menlo;
}

.controls {
  position: fixed;
  text-align: center;
  top: 1em;
  width: 100%;
  word-spacing: 2em;
}

.button {
  color: lime;
  font-size: 16px;
  text-decoration: none;
  text-shadow: 0 0 1em lime;
}

.button:hover {
  color: white;
  text-shadow: 0 0 1em white;
}

.stopwatch {
  font-size: 14em;
  height: 100%;
  line-height: 100vh;
  text-align: center;
  text-shadow: 0 0 0.2em lime;
}

.results {
  border-color: orange;
  margin: 0 auto;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  width: 10em;
}


/**************/

.divider
{
    height: 40px;    
}

.headerContainer80UIBase
{
    background-color: transparent; /*#f3f3f4; /*#e8e8e8;*/
    /*width:100%;*/ 
    overflow: hidden; 
    clear:both;
    text-align: center; 

    min-width: 488px;
    
    margin-left: 24px; 
    margin-right: 24px; 
    margin-top: 2px; 
    margin-bottom: 2px;
}


.dataTileLeftDivHandleUI
{
    float: right; /*left;*/
    width: 80px;
    height: 80px;

    margin-left: 0px;
    
    cursor: pointer;
    /*border: 1px solid yellow;*/
    background-color: #e8e8e8; /*yellow;*/
    /*margin-right: 8px;*/

    /*display: inline-block;
    vertical-align: middle;*/

}


.DataTileContainerUI0{
    /*border: 1px dotted yellow;*/
    height: 80px;
    line-height:80px;
   
    /*background-color: #e8e8e8;*/


    /*overflow: hidden;*/
     /*display:table;*/

     cursor: pointer;
    
    
    background-color: transparent; /*#32323a; /*a2a2a2;*/
    /*text-align: center;*/ 

    display:block; 

    /*margin: 0px 24px 0px 24px;*/

    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px ;
    margin-bottom: 0px;

    padding: 0px;
       
    /*border-left: 2px solid #f3f3f4;*/
    border-left: 2px solid transparent;
}

    .DataTileContainerUI0 .attachDeact
    {
        height: 80px;
        display: block;
        background-color: silver; /*aqua;*/
       ...

JavaScript

var
currentActivity,
    work1Time = [],
    work2Time = [];


var work1 = document.getElementsByTagName('work1')[0],
    //start = document.getElementById('start'),
    //stop = document.getElementById('stop'),
    //clear = document.getElementById('clear'),
    seconds1 = 0, minutes1 = 0, hours1 = 0,
    t1;

var work2 = document.getElementsByTagName('work2')[0],    
    seconds2 = 0, minutes2 = 0, hours2 = 0,
    t2;


function add1() {        
    seconds1++;
    if (seconds1 >= 60) {
        seconds1 = 0;
        minutes1++;
        if (minutes1 >= 60) {
            minutes1 = 0;
            hours1++;
        }
    }
    
    work1.textContent = (hours1 ? (hours1 > 9 ? hours1 : "0" + hours1) : "00") + ":" + (minutes1 ? (minutes1 > 9 ? minutes1 : "0" + minutes1) : "00") + ":"      + (seconds1 > 9 ? seconds1 : "0" + seconds1);

    timer1();
    }

function add2() {
        
        seconds2++;
    if (seconds2 >= 60) {
        seconds2 = 0;
        minutes2++;
        if (minutes2 >= 60) {
            minutes2 = 0;
            hours2++;
        }
    }
    
    work2.textContent = (hours2 ? (hours2 > 9 ? hours2 : "0" + hours2) : "00") + ":" + (minutes2 ? (minutes2 > 9 ? minutes2 : "0" + minutes2) : "00") + ":"      + (seconds2 > 9 ? seconds2 : "0" + seconds2);

    timer2();
}

function add(workNumber) {
    if (workNumber == 1)
    {
        
    seconds1++;
    if (seconds1 >= 60) {
        seconds1 = 0;
        minutes1++;
        if (minutes1 >= 60) {
            minutes1 = 0;
            hours1++;
        }
    }
    
    work1.textContent = (hours1 ? (hours1 > 9 ? hours1 : "0" + hours1) : "00") + ":" + (minutes1 ? (minutes1 > 9 ? minutes1 : "0" + minutes1) : "00") + ":"      + (seconds1 > 9 ? seconds1 : "0" + seconds1);

    timer1();
    }
    else if (workNumber == 2)    
    {
        
        seconds2++;
    if (seconds2 >= 60) {
        seconds2 = 0;
        minutes2++;
        if (minutes2 >= 60) {
            minutes2 = 0;
            hours2++;
 ...