Minimalist Pomodoro Clock

index.html

<div class="container animated fadeIn" class="container-fluid">
<div><object type="application/x-shockwave-flash" width="30" height="25" data="https://www.youtube.com/v/zIjZwBdrTcY?version=2&loop=1&theme=dark"><param name="movie" value="https://www.youtube.com/v/zIjZwBdrTcY?version=2&loop=1&theme=dark" /><param name="wmode" value="transparent" /></object></div>
<div class="container-fluid animated fadeIn">
  <div class="row">
    <div class="col-xs-2 col-sm-2">
            <h1 id="po">Pomodoro</h1></div> <div class="col-xs-8 col-sm-8">
			<div class ="text-container" id="display">25:00</div>
			<button class= "btn btn-default" id="more" class="bt1 "><span class="glyphicon glyphicon-plus"></span></button>
			<button class= "btn btn-default" id="less" class="bt1">     <span class="glyphicon glyphicon-minus"></button>
        <button class= "btn btn-default" id="go" class="bt2" ><span class="glyphicon glyphicon-play"></span></button>
        <button class="btn btn-default" id="pause" class="bt2" ><span class="glyphicon glyphicon-pause"></span></button>
        <button class="btn btn-default" id="reset" class="bt2" ><span class="glyphicon glyphicon-stop"></span></button></div>
<div class="col-xs-2 col-sm-2"><h1 id="clo">Clock</h1></div>
		</div>
    </div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  
 <div class="row">
  <div class="col-xs-12 col-md-12 strong animated fadeIn"><p>Created by: Paulina Fischer</p><br><p>Library from 
<a href="https://www.youtube.com/channel/UCLG_lIjyLPqjN-KtHK_aE-Q" target="_blank">Happy Coder</a> and freeCodeCamp.</p>
</div>
   </div>
  </div>

minimalist-pomodoro-clock.markdown

Minimalist Pomodoro Clock

Freecodecamp proyect.

A Pen by Paulina Fischer on CodePen.

License.

script.js

	  var ck;
		var now;
		var remaining;
		var minutes;
		var seconds;
		var d;
		var i;
		var left;
		var right;
		var line=[];
		var slice;
		var pauseTime;
		var pauseLength;
    var start;
		var length;
		var end;
		var x;

		$(document).ready(function (){
		    ck = 25;
        $('#display').html('25:00');});


		function display () {
                $('#display').empty().html(ck + ':00');
		}

		$('#more').on('click',function() {
		    ck = ck + 1 ;
		    display();
		});

        $('#less').on('click',function() {
            if (ck > 1) {
                ck = ck - 1;
                display();
            }
		});


        
        function a () {
            x = setInterval(function () {

                now = $.now();

                remaining = end - now;

                minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
                seconds = Math.round((remaining % (1000 * 60)) / 1000);


                if (seconds == 60) {
                    document.getElementById("display").innerHTML = "1:00";
                }

                else if (seconds < 10) {
                    document.getElementById("display").innerHTML = minutes + ":0" + seconds;
                }

                else document.getElementById("display").innerHTML = minutes + ":" + seconds;


                if (remaining < 0) {
                    clearInterval(x);
                    document.getElementById("display").innerHTML = "END";
                }

               
                slice = $('#timer').css({
                    'background-image': line.join(',')
                });

            }, 1000);

        }

	
        $('#go').on('click', function () {

	
            if (isNaN(pauseTime)) {
                start = $.now();
                length = ck * 60 * 1000;
                end = start + length;
                a();
            }


            else {
                start = $.now();
                end = start + pauseLength;
            	a();
            }

        });

       
        $('#pause').on('click', function () {
            pauseTime = $.now();
            pauseLength = end - pauseTime;
            clearInterval(x);

        });

      
        $('#reset').on('click',function() {
            clearInterval(x);
            slice = $('#timer').css({
                'background-image': 'linear-gradient(-90deg, #ffaed2 50%, transparent 50%)'
            });
            ck = 25;
            display();
			pauseTime = NaN;
        });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.css

body {
  text-shadow:2px -2px 2px #000000;
                background-image:url("http://res.cloudinary.com/dfqxzvppi/image/upload/q_68/v1505205776/brandi-redd-99504_ldp3gq.jpg");
text-align: center;
background-repeat:no-repeat;
background-size:100% auto; 
background-color:black;
 

			}
@media (min-width: 100px)  { body
     {
        background-image:url("http://res.cloudinary.com/dfqxzvppi/image/upload/v1505291753/sara-aho-46154_vo8lbr.jpg");
    }
  .glyphicon{
    color:red;
  }
  p{
  color:grey;
  
}
}

@media (min-width: 500px) {
    body {
       background-image:url("http://res.cloudinary.com/dfqxzvppi/image/upload/q_68/v1505205776/brandi-redd-99504_ldp3gq.jpg");
    }
  .glyphicon{
    color:whitesmoke;
  }
   p{
  color:black;
  
}
}

@media (min-width: 600px) {
    body {
        background-image:url("http://res.cloudinary.com/dfqxzvppi/image/upload/q_68/v1505205776/brandi-redd-99504_ldp3gq.jpg");
    }
  .glyphicon{
    color:whitesmoke;
  }
   p{
  color:black;
  
}
}

.btn{
  background-color: rgba(0, 0, 0, 0);
 border:none;
  color:whitesmoke;
  position: relative;
  top:150px;
}
.btn:hover {
    background-color:black;
}
.btn:focus {
    background-color: black;
}

			.text-container {
				color: white;
				font-size:60px;
				text-align: center;
				align-content: center;
				background-color: transparent;
        border-color:white;
        border-style:solid;
        position:relative;
        top:150px;
        
			}
h1{color:white;}
#po{ transform: rotate(-90deg);
position:relative;
top:150px;
  font-family: 'Libre Barcode 39 Text', cursive;
 
}
#clo{
  font-family: 'Poiret One', cursive;
  transform: rotate(90deg);
  position:relative;
  top:150px; 
  font-size:50px;
}
.glyphicon{text-shadow:2px -2px 2px #000000}

p{
  color:white;
  
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />