JSFiddle - React, Tailwind, and code Playground

by bittersweetryan

HTML

<section id="time">
    <p id="time">
        01:02:03
    </p>
    <a href="#" id="start">Start</a>
</section>

CSS

section#time{
    background-color: #000088;
    padding: 10px;
    border-radius:10px;
}

p#time{
    margin:10px;
    color:#fff;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

a{
    color:#CCCCCC;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

JavaScript

(function($,window,undefined){
    var $timer = $("p#time"),
        hours = 0,
        minutes = 0,
        seconds = 0,
        $start = $("#start");
    
    var runTimer = function(){
    
        var currentValue = $timer.val().split(":");
        console.log(currentValue);
        hours = parseInt(currentValue[0],10);
        minutes = parseInt(currentValue[1],10);
        seconds = parseInt(currentValue[2],10);
        
        console.log(hours + "," + minutes + "," + seconds);
     //   setTimeout(runTimer(),100);
    };
    
    $start.on("click",function(e){
        runTimer();
        e.preventDefault();
    });
    
})(jQuery,window);