<!-- make a timer-->
<div class="container">
	<div class="subContainer">
		<form id="numbersForm">
		<input id="minutesInput" type="number" min="0"  placeholder="Minutes">
		<span id="colonStyle" class="colon">:</span>
		<input id="secondsInput" type="number" min="0" max="60" maxlength="2" step="5" placeholder="Seconds" value="">
		</form>
		<form>
		<input id="startButton" type="button" placeholder="Start" value="Start">
		<span class="colon">&nbsp;</span>
		<input id="resetButton" type="button" placeholder="reset" value="Reset">
		</form>
	</div>
	<progress id="progressBar" max="0" value="0" class="progress_styled"></progress>
</div>
html, body {
  min-height: 100%;
}

html {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

body {
	background: #000023;
	min-height: 100%;
	width: 100%;
	/* vertically aligns element */
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

.container {
	width: 70%;
	background: royalblue;
	border-radius: 10px;
	padding: 2rem;
	/* horizontally aligns element */
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0px 0px 100px 3px
		royalblue;
}

.subContainer {
	width: 90%;
	margin: 0 auto;
}

input[type="number"],
#colonStyle {
	-webkit-transition: background 1s, color 1s, font-size 1s;	
	transition: background 1s, color 1s, font-size 1s;
}
input {
	font-size: 2rem;
	border-radius: 5px;
	text-align: center;
	overflow: hidden;
	border: none;
		/* gives equal widths to flex-cards */
	-webkit-box-flex: 1;
	-webkit-flex-grow: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	-webkit-flex: 1;
	/* makes all flex-cards have the same height */
	-webkit-align-self: stretch;
        -ms-flex-item-align: stretch;
            align-self: stretch;
}
form {
		display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

.colon {
	font-size: 4rem;
	color: white;
	font-family: monospace;
	-webkit-transition: text-shadow 1s, font-size 1s, color 1s, background 1s;
	transition: text-shadow 1s, font-size 1s, color 1s, background 1s;
}

.form_active {
	background: royalblue;
	color: gold;
	font-size: 6rem;
	text-shadow: 0px 0px 4px 3px navy;
}
progress {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
}
.progress_styled {
	width: 100%;
	line-height: 2;
	height: 3rem;
}
progress::-webkit-progress-bar {
background-color: #000023;
border-radius: 0px 0px 10px 10px;
background-color: clear;
border: 5px solid blue;
box-shadow: inset 10px 10px 21px rgba(240,240,240,0.1);
}

progress::-webkit-progress-value {
background: #d3e2dc;
background: linear-gradient(to bottom, #d3e2dc 1%,#cde8dd 49%,#d3e2dc 100%);
background: -moz-linear-gradient(top, #d3e2dc 1%, #cde8dd 49%, #d3e2dc 100%);
background: -webkit-linear-gradient(top, gold 1%,darkgoldenrod 49%,goldenrod 100%);
background: -o-linear-gradient(top, gold 1%,darkgoldenrod 49%,goldenrod 100%);
background: -ms-linear-gradient(top, gold 1%,darkgoldenrod 49%,goldenrod 100%);
border-radius: 10px;
transition: width 1s linear;
}

/* timer experiment */
#startButton, #resetButton {
	background: gold;
	color: navy;
	box-shadow: 0px 0px 13px 2px navy;
	-webkit-transition: text-shadow 0.4s, box-shadow 0.5s, background 0.3s, color 0.2s;
	transition: text-shadow 0.4s, box-shadow 0.5s, background 0.3s, color 0.2s;
	border: none;
}

#startButton:hover, #resetButton:hover {
	box-shadow: 0px 0px 0px 0px transparent;
	background: navy;
	color: gold;
}

@media screen and (max-width: 34em) { 
	.form_active {
		font-size: 4.5rem;		
	}
}
var minutesInput = document.getElementById("minutesInput");
var secondsInput = document.getElementById("secondsInput");
var startButton = document.getElementById("startButton");
var progressBar = document.getElementById("progressBar");
var colonStyle = document.getElementById("colonStyle");

var progressBarMax;
var changeSeconds = 0;
var changeMinutes = 0;
var stopper;

var setTime = function(){
	clearTimeout(stopper);
	var getMinutes = parseInt(minutesInput.value);
	var getSeconds = parseInt(secondsInput.value);
	/* seconds logic */

	if (getSeconds <= 9) {
		var originalValue = secondsInput.value;
		secondsInput.value = ("0" + originalValue).slice(-2);
	} else if (getSeconds >= 60) {
		secondsInput.value = ("0" + 0).slice(-2);
		changeSeconds = 0;
	} else if (getSeconds >= 10) {
		secondsInput.value = getSeconds;
	} else if (secondsInput.value == "") {
		secondsInput.value = ("0" + 0).slice(-2);
	}
	/* minutes logic */
	if (minutesInput.value == "") {
		minutesInput.value = 0;
	} 
	changeMinutes = parseInt(minutesInput.value);
	minutesInput.value = changeMinutes;
	changeMinutes = changeMinutes * 60;
	changeSeconds = parseInt(secondsInput.value);
	var totalTime = changeSeconds + changeMinutes;
	progressBar.value = 0;
	progressBar.setAttribute("max", totalTime );
	progressBarMax = totalTime;
}

minutesInput.addEventListener("keyup", setTime);
minutesInput.addEventListener("click", setTime);
secondsInput.addEventListener("keyup", setTime);
secondsInput.addEventListener("click", setTime);


/** main countdown **/
var progressCountdown = function()
{
	secondsInput.classList.add("form_active");
minutesInput.classList.add("form_active");
colonStyle.classList.add("form_active");
	
	minutesInput.disabled = false;
	secondsInput.disabled = false;
	stopper = setTimeout(progressCountdown, 1000);
	if (secondsInput.value == 0 && minutesInput.value > 0){
		secondsInput.value = 60;
		minutesInput.value -= 1;
	}
	
	if (secondsInput.value > 0){
		secondsInput.value -= 1;		
		progressBar.value += 1;
	}

	if (secondsInput.value < 10){
		var concatSeconds = secondsInput.value;
		secondsInput.value = ("0" + concatSeconds).slice(-2);
		
	}
	if (progressBar.value == progressBar.max) {
		/* remove styling */
		secondsInput.classList.remove("form_active");
minutesInput.classList.remove("form_active");
colonStyle.classList.remove("form_active");
		/* sound */
		var soundClick = document.createElement("audio");
	soundClick.src = 'http://soundbible.com/mp3/Robot_blip-Marianne_Gagnon-120342607.mp3';
	soundClick.autoplay = "true";	document.body.appendChild(soundClick);	
		/* sound */
		clearTimeout(stopper);
		minutesInput.removeAttribute("disabled");
		secondsInput.removeAttribute("disabled");
	}
}

var progressReset = function(){
	progressBar.value = 0;
	secondsInput.value = ("0" + 0).slice(-2);
	minutesInput.value = 0;
	progressBar.setAttribute("max", 0);
	secondsInput.classList.remove("form_active");
minutesInput.classList.remove("form_active");
colonStyle.classList.remove("form_active");
	minutesInput.removeAttribute("disabled");
	secondsInput.removeAttribute("disabled");	
	clearTimeout(stopper);
}

var enterPressed = function(event){
	var key = event.which || event.keyCode;
	if (key === 13) { // 13 is enter
		// code for enter
		progressCountdown();
		secondsInput.setAttribute("disabled", true);
		minutesInput.setAttribute("disabled", true);
	}
}
		
startButton.addEventListener("click", progressCountdown);
resetButton.addEventListener("click", progressReset);
minutesInput.addEventListener("keypress", enterPressed);
secondsInput.addEventListener("keypress", enterPressed);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js