cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="clock">

	<div id="title">Toe&#8209;may&#8209;toe, Toe&#8209;mah&#8209;toe</div>

	<div id="set-timer-top">
		<button id="minute-up" class="set-timer-up" onclick="addTime()">+1 MIN</button>
	</div>

	<div id="clockFace">
		<span id="time">25:00</span>
	</div>
	
	<div id="set-timer-bottom">
		<button id="minute-down" class="set-timer-down" onclick="subtractTime()">-1 MIN</button>
	</div>

	<div id="controls">
		<button id="start" onclick="startClock()">START</button>
		<button id="stop" onclick="stopClock()">STOP</button>
		<button id="reset" onclick="resetClock()">RESET</button>
	</div>

</div>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Lobster|Roboto:400,700,900,900italic,700italic,400italic);

input:focus,
I select:focus,
textarea:focus,
button:focus {
	outline: none;
}

body {
	background: #810000 url('http://www.mikemorkes.com/codepen/pomodoro/red_tomato.jpg') no-repeat center top;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	padding-top: 30px;
	text-align: center;
}

#title {
	color: #fff;
	font-size: 45px;
	margin-bottom: 0;
	text-shadow: 0 0 8px #000;
	font-family: 'Lobster', cursive;
}

@media only screen and (max-width:480px) {
	#message {
		color: #fff;
		font-size: 30px;
		margin-bottom: 0;
		text-shadow: 0 0 8px #000;
		font-family: 'Lobster', cursive;
	}
}

#clockFace {
	color: #fff;
	font-size: 100px;
	margin-bottom: 0;
	font-weight: 900;
	text-shadow: 0 0 8px #000;
}

#set-timer-top {
	margin: 40px 0 0;
}

#set-timer-bottom {
	margin: 0 0 80px;
}

.set-timer-up {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
	background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
	/* IE6-9 */
	border: none;
	color: #000;
	cursor: pointer;
	padding: 0;
	margin: 0 auto;
	font-size: 20px;
	width: 300px;
	color: #fff;
	cursor: pointer;
	padding: 15px 10px;
	margin: 0 auto;
	border-radius: 10px;
	font-weight: 900;
	text-shadow: 0 0 8px #000;
	animation-duration: .2s !important;	
	-webkit-animation-duration: .2s !important;	
}

.set-timer-down {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100;White+to+Transparent */
	background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
	/* IE6-9 */
	border: none;
	color: #000;
	cursor: pointer;
	padding: 0;
	margin: 0 auto;
	font-size: 20px;
	width: 300px;
	color: #fff;
	cursor: pointer;
	padding: 15px 10px;
	margin: 0 auto;
	border-radius: 10px;
	font-weight: 900;
	text-shadow: 0 0 8px #000;
	animation-duration: .25s !important;	
	-webkit-animation-duration: .25s !important;
}

#controls button {
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 15px 30px;
	margin: -20px auto 0;
	border-radius: 10px;
	font-weight: 900;
	font-size: 30px;
	width: 300px;
	text-shadow: 0 0 8px #000;
}

#start {
	background: -moz-linear-gradient(top, rgba(0, 127, 6, 1) 0%, rgba(0, 127, 6, 0.15) 100%);
	background: -webkit-linear-gradient(top, rgba(0, 127, 6, 1) 0%, rgba(0, 127, 6, 0.15) 100%);
	background: linear-gradient(to bottom, rgba(0, 127, 6, 1) 0%, rgba(0, 127, 6, 0.15) 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#007f06', endColorstr='#26007f06', GradientType=0);
}

#stop {
	background: -moz-linear-gradient(top, rgba(178, 0, 0, 1) 0%, rgba(178, 0, 0, 0.15) 100%);
	background: -webkit-linear-gradient(top, rgba(178, 0, 0, 1) 0%, rgba(178, 0, 0, 0.15) 100%);
	background: linear-gradient(to bottom, rgba(178, 0, 0, 1) 0%, rgba(178, 0, 0, 0.15) 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b20000', endColorstr='#26b20000', GradientType=0);
}

#reset {
	background: -moz-linear-gradient(top, rgba(234, 183, 0, 1) 0%, rgba(234, 183, 0, 0.15) 100%);
	background: -webkit-linear-gradient(top, rgba(234, 183, 0, 1) 0%, rgba(234, 183, 0, 0.15) 100%);
	background: linear-gradient(to bottom, rgba(234, 183, 0, 1) 0%, rgba(234, 183, 0, 0.15) 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#eab700', endColorstr='#26eab700', GradientType=0);
}

#stop,
#reset {
	display: none;
}

            
          
!
            
              $(document).ready(function() {
	$("#clock").addClass("animated pulse");
});

var countdown, minCalc, secCalc, masterTimer; 
var timeCalculationNum = 25; // the starting number used to calculate the timer


// +1/-1 time button functions
// add time
function addTime() {
	timeCalculationNum = timeCalculationNum + 1;

	if (timeCalculationNum < 10) {
		document.getElementById("time").innerHTML = '0' + timeCalculationNum.toString() + ":00";
	} else {
		document.getElementById("time").innerHTML = timeCalculationNum.toString() + ":00";
	}

	$("#minute-up").addClass("animated bounceIn").one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
		function(e) {
			$(this).removeClass('animated bounceIn');
		}
	);
}

// subtract time
function subtractTime() {
	if (timeCalculationNum === 1) { // if clock was already at 1:00, reset to 25:00
		timeCalculationNum = 25;
		document.getElementById("time").innerHTML = timeCalculationNum.toString() + ":00";
		$("#minute-down").addClass("animated bounceIn").one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
			function(e) {
				$(this).removeClass('animated bounceIn');
			}
		);
	} else {
		timeCalculationNum = timeCalculationNum - 1;

		if (timeCalculationNum < 10) {
		document.getElementById("time").innerHTML = '0' + timeCalculationNum.toString() + ":00";
	} else {
		document.getElementById("time").innerHTML = timeCalculationNum.toString() + ":00";
		}

		$("#minute-down").addClass("animated bounceIn").one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
			function(e) {
				$(this).removeClass('animated bounceIn');
			}
		);
	}
}

// timer function using the system clock for accuracy, working from http://stackoverflow.com/questions/20618355/the-simplest-possible-javascript-countdown-timer

function masterTimer(duration, display) {
    var start = Date.now(), diff, minutes, seconds;
    function timer() {
        // get the number of seconds that have elapsed  
        diff = duration - (((Date.now() - start) / 1000) | 0);

        // calculate minutes and seconds
        minutes = (diff / 60) | 0;
        seconds = (diff % 60) | 0;
				
				// if timer ends, run success function
				if (minutes === 0 && seconds === 0) {
					success();
				}			

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds; 
			
        if (diff <= 0) {
            start = Date.now() + 1000;
        }
    };
    // run timer once to avoid setInterval delay, then run in setInterval
    timer();
    countdown = setInterval(timer, 1000);
}

// start clock button action
function startClock() {
	var timeConversion = 60 * timeCalculationNum, display = document.querySelector('#time');
  masterTimer(timeConversion, display);

	// change background and title	
	document.body.style.background = "#009631 url('http://www.mikemorkes.com/codepen/pomodoro/green_tomato.jpg') no-repeat center top";
	document.getElementById("title").innerHTML = "Get to work!";

	// remove zoom class so we can reuse it later
	$(document).ready(function() {
		$("#clock").removeClass("animated pulse");
	});

	// show stop button, hide start button	
	document.getElementById("start").style.display = "none";
	document.getElementById("stop").style.display = "block";
}

// stop clock button action
function stopClock() {

	// stop countdown
	clearInterval(countdown);

	// change background and title
	document.body.style.background = "#810000 url('http://www.mikemorkes.com/codepen/pomodoro/red_tomato.jpg') no-repeat center top";
	document.getElementById("title").innerHTML = "Well? We're waiting!";

	// show reset button, hide stop button
	document.getElementById("stop").style.display = "none";
	document.getElementById("reset").style.display = "block";
}


// reset clock button action
function resetClock() {
	// reset time and clock face
	timeCalculationNum = 25;
	document.getElementById("title").innerHTML = "Toe&#8209;may&#8209;toe, Toe&#8209;mah&#8209;toe";
	document.getElementById("time").innerHTML = "25:00";

	// change background	
	document.body.style.background = "#810000 url('http://www.mikemorkes.com/codepen/pomodoro/red_tomato.jpg') no-repeat center top";

	// show start button, hide reset button
	document.getElementById("start").style.display = "block";
	document.getElementById("reset").style.display = "none";
}

// success
function success() {
		clearInterval(countdown);
		// reset timeCalculationNum, change title and background
		timeCalculationNum = 25;
		
		document.getElementById("title").innerHTML = "Take a break, you've earned it!";
		document.body.style.background = "#0051ad url('http://www.mikemorkes.com/codepen/pomodoro/beach_bkgd.jpg') no-repeat center top";
		document.getElementById("time").innerHTML = "00:00";

		// show reset button, hide stop button
		document.getElementById("stop").style.display = "none";
		document.getElementById("reset").style.display = "block";

		// zoom in the clock for some whiz bang
		$(document).ready(function() {
			$("#clock").addClass("animated pulse");
		});
	
		// Play audio
		var audio = new Audio('http://www.mikemorkes.com/codepen/pomodoro/squish.mp3');
		audio.play();	
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console