JSFiddle - React, Tailwind, and code Playground

by InsaneCoder

HTML

<!-- Three Text  -->
<div class="btn-group btn-group-justified">
  <div class="btn-group" >
    <button type="button" class="btn btn-default" id="1">Left</button>
  </div>
  <div class="btn-group" >
    <button type="button" class="btn btn-default" id="2">Middle</button>
  </div>
  <div class="btn-group" >
    <button type="button" class="btn btn-default" id="3">Right</button>
  </div>
</div>

<!-- The Timer -->
<h1 align="center">Timer : <small id="timer">0 s</small></h1>

<!-- The Stats Table -->
<table class="table table-striped" id="stats">
  <tr>
  	<th>Time Gap</th>
  	<th>Started By</th>
  	<th>Stopped By</th>
  </tr>
</table>

CSS

.table
	{
		margin-top: 100px;
	}

JavaScript

var time = 0;
	var element = 1;
	var beginElement = -1;
	var stopElement = -1;
	var start;
	$(document).ready(function(){
		//Blink the 3 Text Buttons at every 3 seconds one by one
		var interval = setInterval(function(){
			$('#'+element).fadeOut(200);
			$('#'+element).fadeIn(200);
			//cycle through the 3 buttons 1-2-3-1-2-3-1-2......
			element = ((element+1)%4);
			element = (element == 0)?1:element;
		},3000);

		$('.btn').click(function(){
			if(beginElement == -1)
			{
				beginElement = this.id;
			}
			else
			{
				stopElement = this.id;
				//make an entry into the stats table
				$('#stats').append("<tr><td>"+time+"</td><td>Element "+beginElement+"</td><td>Element "+stopElement+"</td></tr>");
				beginElement = stopElement;
			}
			start = new Date;
			setInterval(function() {
				time = Math.round((new Date - start) / 1000);
			    $('#timer').text(time + " Seconds");
			}, 1000);
		});
	});