Pomodoro

In this example below you will see how to do a Pomodoro with some HTML / CSS and Javascript

Precise timer for your work

Thumbnail
This awesome code was written by Ľubomír Drinka, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Ľubomír Drinka ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Pomodoro</title>
  <link href="https://fonts.googleapis.com/css?family=Monsieur+La+Doulaise" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body class="shadowwhite ">

    <div class="inline mainbox  ">

        <div style="width: 200px; height:100px; margin: 100px">
            <h5 class="centertext">Break Length</h5>
            <div class="inline minibox ">
                <div class="btn enlarge" id="BLp">+</div>
                <div class="centertext enlarge" id="BL">5</div>
                <div class="btn enlarge" id="BLm">-</div>
            </div>
        </div>
        <div style="width: 200px; height:100px; margin: 100px">
            <h5 class="centertext ">Session length</h5>
            <div class="inline minibox">
                <div class="btn enlarge" id="SLp">+</div>
                <div class="centertext enlarge " id="SL">25</div>
                <div class="btn  enlarge" id="SLm">-</div>
            </div>
        </div>
    </div>

    <div>

        <div id="countBtn" class="btn circle centertext">

            <div id='Sessiondiv'>Session</div>
            <div id="counter">25</div>
        </div>
    </div>
    

<span class=" Monsieur_La_Doulaisefont" style="padding-left: 200px; font-size:70pt "> Pomodoro</span>


</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/vanderdrilu/pomodoro-ZoVpPa */
.circle {
  margin: -80px 45%;
  width: 200px;
  height: 200px;
  border-radius: 100px 100px 100px 100px;
  -moz-border-radius: 100px 100px 100px 100px;
  text-align: center;
  border: 3px  solid olivedrab;
  vertical-align: middle;
  padding: 10px 10px;
  font-size: 250%;
}

.enlarge {
  font-size: 25pt;
}

.minibox {
  width: 90%;
  height: 50px;
}

.mainbox {
  width: 100%;
  height: 140px;
}

.inline {
  display: flex;
  padding: 20px;
  margin: 10px;
  justify-content: center;
  align-items: center;
  /* border: 1px solid darkgreen;*/
}

.centertext {
  text-align: center;
}

.shadowwhite {
  color: #000000;
  text-shadow: 2px 2px 1px white;
}

.btn1 {
  height: 40px;
  background-color: transparent;
}

.break {
  background-size: cover;
  margin-top: 100px;
  background-repeat: no-repeat;
  background-image: url("https://st.depositphotos.com/1152339/3601/i/950/depositphotos_36011057-stock-photo-time-concept-break-time-on.jpg");
}

.work {
  background-size: cover;
  margin-top: 100px;
  background-repeat: no-repeat;
  background-image: url("http://cdn.wonderfulengineering.com/wp-content/uploads/2014/10/motivational-wallpaper-17.jpg");
}

button :visited, :focus :active {
  outline: 0;
}

.Monsieur_La_Doulaisefont {
  font-family: 'Monsieur La Doulaise', cursive;
}


/*Downloaded from https://www.codeseek.co/vanderdrilu/pomodoro-ZoVpPa */
$(document).ready(function () {
    var Session_length = 25;
    Session_length = $('#SL').text();
    var Countdownlength = Session_length;
    var rebootBoo = false;
    var stoppedBoo = true;
    circlecolor = 'green';
    var breakPhase = false;
    var Break_length = 5;
    Break_length = $('#BL').text();
    var circleheigth = $('#countBtn').height();
    var coundowntimeMs;
    var last_time = new Date();
    var stop_time = new Date();
    var restart_time = new Date();
    var pausetimeMS = 0;
    var coundowntime = new Date();
    $('body').addClass('work');
    var welcomeaudiourl = 'http://soundbible.com/grab.php?id=1758&type=wav';
    var breakudiourl = 'http://soundbible.com/grab.php?id=2218&type=wav';
    $('body').toggleClass('back1');
    $('#countBtn').click(function () {
        var timer;
        iniciation();
    });
    function iniciation() {
        if (stoppedBoo === false) {
            stoppedBoo = true;
            stop_time = new Date();
            timerstopfunc();
        }
        else {
            stoppedBoo = false;
            restart_time = new Date();
            pausetimeMS += restart_time.getTime() - stop_time.getTime();
            if (breakPhase === false) {
                reboot(Session_length);
                $('#Sessiondiv').text("Session");
                Countdownlength = Session_length;
                playSound(welcomeaudiourl);
                $('body').addClass('work');
                $('body').removeClass('break');
            }
            else {
                reboot(Break_length);
                $('#Sessiondiv').text('Break');
                Countdownlength = Break_length;
                playSound(breakudiourl);
                $('body').addClass('break');
                $('body').removeClass('work');
            }
            coundowntime.setMinutes(Countdownlength);
            coundowntime.setSeconds(0);
            coundowntimeMs = coundowntime.getTime();
            timerfunc();
        }
    }
    function reboot(BreakorSession) {
        if (rebootBoo === true) {
            last_time = new Date();
            stop_time = new Date();
            restart_time = new Date();
            pausetimeMS = 0;
            rebootBoo = false;
        }
    }
    function timerstopfunc() {
        window.clearInterval(timer);
    }
    function timerfunc() {
        timer = window.setInterval(disp, 1000);
    }
    function disp() {
        var date = new Date();
        var dateMS = date.getTime();
        var lastMS = last_time.getTime();
        var diff = dateMS - lastMS;
        //nastavený čas 25 min mínus rozdiel medzi dvomi časmi plus pauza
        diff = pausetimeMS + coundowntimeMs - diff;
        var outdate = new Date(diff);
        var min = outdate.getMinutes();
        var sec = outdate.getSeconds();
        var first = ((min * 60) + sec);
        var second = (Countdownlength * 60);
        var circlePercent = ((min * 60 + sec) / (Countdownlength * 60)) * 100;
        $('#countBtn').css('background-image', 'linear-gradient( transparent ' +
            circlePercent + '%,' + circlecolor + ' ' + (100 - circlePercent) + '% )');
        var timeshort = (min < 10 ? '0' : '') + min + String.fromCharCode(58) + (sec < 10 ? '0' : '') + sec;
        $('#counter').text(timeshort);
        if (min == 0 && sec == 0 && breakPhase === false) {
            breakPhase = true;
            Countdownlength = Break_length;
            circlecolor = 'darkorchid';
            timerstopfunc();
            stoppedBoo = true;
            rebootBoo = true;
            iniciation();
            $('#countBtn').css('border', '3px  solid ' + circlecolor);
        }
        else if (min == 0 && sec == 0 && breakPhase === true) {
            breakPhase = false;
            Countdownlength = Session_length;
            circlecolor = 'green';
            rebootBoo = true;
            iniciation();
            $('#countBtn').css('border', '3px  solid ' + circlecolor);
            timerstopfunc();
            stoppedBoo = true;
            iniciation();
        }
    }
    $('#BLp').click(function () {
        Break_length++;
        changeBreak_length();
    });
    $('#BLm').click(function () {
        if (Break_length > 1)
            Break_length--;
        changeBreak_length();
    });
    function changeBreak_length() {
        $('#BL').text(Break_length);
    }
    $('#SLp').click(function () {
        if (stoppedBoo === true) {
            Session_length++;
            changeSession_Length();
        }
    });
    $('#SLm').click(function () {
        if (stoppedBoo === true) {
            if (Session_length > 1)
                Session_length--;
            changeSession_Length();
        }
    });
    function changeSession_Length() {
        $('#SL').text(Session_length);
        $('#counter').text(Session_length);
        last_time = new Date();
        stop_time = new Date();
        restart_time = new Date();
        pausetimeMS = 0;
        timerstopfunc();
    }
    function playSound(url) {
        var a = new Audio(url);
        a.play();
    }
});

Comments