Pomodoro Clock

Pomodoro Clock

HTML

<audio id="bell" src="http://www.mediacollege.com/downloads/sound-effects/money/cash-register-01.wav" type="audio/mpeg"></audio>
    <div class="container-fluid text-center">
        <h1>Pomodoro Clock</h1>
        <h3>An App To Manage Your Time</h3>
        <div class="sesTimer">
            <h1 id="timeSes">Session Time</h1>
            <h1 id="timeType"></h1>
            <a href="#" class="btn btn-primary" id="minTime">-</a>
            <h2 id="num">25</h2>
            <a href="#" class="btn btn-primary" id="adTime">+</a>
            <a href="#" class="btn btn-primary" id="reset">Reset</a>
        </div>
        <div id="brTimer">
            <h1 id="timerBr">Break Time</h1>
            <a href="#" class="btn btn-primary" id="minBr">-</a>
            <h2 id="numBr">5</h2>
            <a href="#" class="btn btn-primary" id="adBr">+</a>
        </div>
        <a href="#" class="btn btn-primary" id="start">Start</a>
    </div>

CSS

@import url(https://fonts.googleapis.com/css?family=Lato);
body{
 background-image:url("http://reallondon.ru/wp-content/uploads/2013/03/18-e1386001921165.jpg");
 font-family: "Lato";
    background-size:100%;
    background-origin:padding-box;
    background-size:cover;    
    background-attachment: fixed;
    color: black;
}
h1{
 color: black;   
}
h2{
    display: inline;
}

#start {
 margin: 10px;
}
#num,
#numBr{
  color:red;
  font-weight: bold;
}

JS

$(document).ready(function() {

    $("#message").hide();
    var buzzer = $("#bell")[0];
    var count = parseInt($("#num").html());
    var breakTime = parseInt($("#numBr").html());

    $("#reset").hide();

    $("#start").click(function() {
        var counter = setInterval(timer, 1000);
        count *= 60;

        function timer() {
            
            $("#start, #minTime, #adTime,#minBr,#adBr,#numBr,#timeSes,#timeBr").hide();
            $("#timeType").show();
            $("#timeType").html("Session Time: ");

            var display = $('#num');
            timeset(count, display);
            count -= 1;
            if (count === 0) {
                buzzer.play();
                clearInterval(counter);
                var startBreak = setInterval(breakTimer, 1000);
                breakTime *= 60;
                $("#num").hide();
                breakTimer();
            }

            function breakTimer() {
                $("#numBr").show();
                $("#timeType").html("Break Time: ");

                var bdisplay = $('#numBr');
                timeset(breakTime, bdisplay);
                breakTime -= 1;
                if (breakTime === 0) {
                    clearInterval(startBreak);
                    buzzer.play();
                    $("#timeType").hide();
                    $("#reset").show();
                    $("#numBr").hide();
                }
            }
        }
    });

    function timeset(clock, display) {
        var hours, minutes, seconds;
        hours = parseInt(Math.floor(clock / 3600, 10));
        minutes = parseInt(Math.floor(clock % 3600 / 60));
        seconds = parseInt(Math.floor(clock % 3600 % 60));

        hours = hours > 0 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        var out = display.text(hours + ":" + minutes + ":" + seconds);
        return out;
    }

    $("#reset").click(function() {
        count = 25;
        breakTime = 5;
        $("#num").html(count);
        $("#numBr").html(breakTime);
        $("#start, #minTime, #num, #adTime,#minBr,#adBr,#numBr,#timeSes,#timeBr").show();
        $("#reset").hide();
    });

    $("#minTime").click(function() {
        if (count > 1) {
            count -= 1;
            $("#num").html(count);
        }
    });

    $("#adTime").click(function() {
        count += 1;
        $("#num").html(count);

    });
    $("#minBr").click(function() {
        if (breakTime > 1) {
            breakTime -= 1;
            $("#numBr").html(breakTime);
        }
    });

    $("#adBr").click(function() {
        breakTime += 1;
        $("#numBr").html(breakTime);

    });
});

See the Pen Pomodoro Clock by YaroslavW (@YaroslavW) on CodePen.