ralucas/index.html

## index.html
<!DOCTYPE HTML>
<html>

	<head>
		<title>Quick Pace Calculator</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body>
		<div class="wrapper">
		<div class="container">
			<h1>Pace Calculator</h1>
				<div id="info">
				<div id="pace">
					<h3>Pace:</h3>
						<ul class="listing" id="pace-list">
							<li class="pace input-list">Time (HMS): <input type="number" name="paceH" id="paceHour" class="info"></li>
							<li class="pace input-list">: <input type="number" name="paceM" id="paceMin" class="info"></li>
							<li class="pace input-list">: <input type="number" name="paceS" id="paceSec" class="info"></li>
						</ul>
						<p></p>
				</div>

				<div id="distance">
					<h3>Distance:</h3>
						<ul class="listing" id="dist-list">
							<li class="dist input-list">Miles/Kms: <input type="number" name="dis" id="dist" class="info"></li>
						</ul>
						<p></p>
				</div>

				<div id="totalTime">
					<h3>Total Time:</h3>
						<ul class="listing" id="tt-list">
							<li class="ttime input-list">Time (HMS): <input type="number" name="totaltH" id="ttHour" class="info"></li>
							<li class="ttime input-list">: <input type="number" name="totaltM" id="ttMin" class="info"></li>
							<li class="ttime input-list">: <input type="number" name="totaltS" id="ttSec" class="info"></li>
						</ul>
						<p></p>
				</div>

				</div>

			<div id="b">
		 		<input type="button" class="button" id="runButton" value="Run">
		 		<input type="reset" class="button" id="resetButton" value="Reset">
			</div>

		</div>
		<div>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="pacejq.js"></script>
	</body>

</html>

## pacejq.js
$(document).ready(function(){

	var answer;

$("#runButton").on("click", function(){

	var paceHourV = $("#paceHour").val();
	var paceMinV = $("#paceMin").val();
	var paceSecV = parseInt($("#paceSec").val())||0;
	var distanceV = $("#dist").val();
	var ttHourV = $("#ttHour").val();
	var ttMinV = $("#ttMin").val();
	var ttSecV = parseInt($("#ttSec").val())||0;

	var paceConv = (paceHourV*3600) + (paceMinV*60) + paceSecV;

	var ttConv = (ttHourV*3600) + (ttMinV*60) + ttSecV;

	var totalTime = 0;

	var totalPace = 0;

	var totalDistance = 0;

	var paceList = $("#pace-list");
	var distList = $("#dist-list");
	var ttList = $("#tt-list");

	var divPace = $("#pace");
	var divDistance = $("#distance");
	var divTotalTime= $("#totalTime");

	var doubleDigit = function(num){
			if(num < 10){
			return "0"+num;
			}

			else{
				return num;
			}
		};

	var timeConv = function(time){
			var hour = 0;
			var min = 0;
			var sec = 0;

			if(time > 3600){
				hour = Math.floor(time/3600);
				min = Math.floor((time%3600)/60);
				sec = ((time%3600)%60) % 60;
			    return hour + ":" + doubleDigit(min) + ":" + doubleDigit(sec);
			}
			else if (time > 60){
				min = Math.floor(time/60);
				sec = (time%60) % 60;
				return doubleDigit(min) + ":" + doubleDigit(sec);
			}
			else {
				return time + " seconds";
			}
		};


		if((paceHourV > 0 || paceMinV > 0 || paceSecV > 0) && (distanceV > 0)){
			totalTime = distanceV * paceConv;
			answer = timeConv(totalTime);
			ttList.slideUp();
			divTotalTime.append("<h4>"+answer+"</h4>");
		}
		else if((ttHourV > 0 || ttMinV > 0 || ttSecV > 0) && (distanceV > 0)){
			totalPace = ttConv/distanceV;
			answer = timeConv(totalPace);
			paceList.slideUp();
			divPace.append("<h4>"+answer+"</h4>");
		}
		else if((paceHourV > 0 || paceMinV > 0 || paceSecV > 0) && (ttHourV > 0 || ttMinV > 0 || ttSecV > 0)){
			totalDistance = (ttConv/paceConv).toFixed(2);
			distList.slideUp();
			divDistance.append("<h4>"+totalDistance+" m/km</h4>");
		}
		else{
			alert("You are missing some data, please enter info in at least two categories.")
		}
	});

	$("#resetButton").on("click", function(){
			var info = $(".info");
   			var paceList = $("#pace-list");
			var distList = $("#dist-list");
			var ttList = $("#tt-list");

			ttList.slideDown();
			paceList.slideDown();
			distList.slideDown();
			$("h4").fadeOut();
			info.val('');
	});
});
	<!DOCTYPE HTML>
	<html>

	<head>
	<title>Quick Pace Calculator</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body>
	<div class="wrapper">
	<div class="container">
	<h1>Pace Calculator</h1>
	<div id="info">
	<div id="pace">
	<h3>Pace:</h3>
	<ul class="listing" id="pace-list">
	<li class="pace input-list">Time (HMS): <input type="number" name="paceH" id="paceHour" class="info"></li>
	<li class="pace input-list">: <input type="number" name="paceM" id="paceMin" class="info"></li>
	<li class="pace input-list">: <input type="number" name="paceS" id="paceSec" class="info"></li>
	</ul>
	<p></p>
	</div>

	<div id="distance">
	<h3>Distance:</h3>
	<ul class="listing" id="dist-list">
	<li class="dist input-list">Miles/Kms: <input type="number" name="dis" id="dist" class="info"></li>
	</ul>
	<p></p>
	</div>

	<div id="totalTime">
	<h3>Total Time:</h3>
	<ul class="listing" id="tt-list">
	<li class="ttime input-list">Time (HMS): <input type="number" name="totaltH" id="ttHour" class="info"></li>
	<li class="ttime input-list">: <input type="number" name="totaltM" id="ttMin" class="info"></li>
	<li class="ttime input-list">: <input type="number" name="totaltS" id="ttSec" class="info"></li>
	</ul>
	<p></p>
	</div>

	</div>

	<div id="b">
	<input type="button" class="button" id="runButton" value="Run">
	<input type="reset" class="button" id="resetButton" value="Reset">
	</div>

	</div>
	<div>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="pacejq.js"></script>
	</body>

	</html>
	$(document).ready(function(){

	var answer;

	$("#runButton").on("click", function(){

	var paceHourV = $("#paceHour").val();
	var paceMinV = $("#paceMin").val();
	var paceSecV = parseInt($("#paceSec").val())\|\|0;
	var distanceV = $("#dist").val();
	var ttHourV = $("#ttHour").val();
	var ttMinV = $("#ttMin").val();
	var ttSecV = parseInt($("#ttSec").val())\|\|0;

	var paceConv = (paceHourV3600) + (paceMinV60) + paceSecV;

	var ttConv = (ttHourV3600) + (ttMinV60) + ttSecV;

	var totalTime = 0;

	var totalPace = 0;

	var totalDistance = 0;

	var paceList = $("#pace-list");
	var distList = $("#dist-list");
	var ttList = $("#tt-list");

	var divPace = $("#pace");
	var divDistance = $("#distance");
	var divTotalTime= $("#totalTime");

	var doubleDigit = function(num){
	if(num < 10){
	return "0"+num;
	}

	else{
	return num;
	}
	};

	var timeConv = function(time){
	var hour = 0;
	var min = 0;
	var sec = 0;

	if(time > 3600){
	hour = Math.floor(time/3600);
	min = Math.floor((time%3600)/60);
	sec = ((time%3600)%60) % 60;
	return hour + ":" + doubleDigit(min) + ":" + doubleDigit(sec);
	}
	else if (time > 60){
	min = Math.floor(time/60);
	sec = (time%60) % 60;
	return doubleDigit(min) + ":" + doubleDigit(sec);
	}
	else {
	return time + " seconds";
	}
	};


	if((paceHourV > 0 \|\| paceMinV > 0 \|\| paceSecV > 0) && (distanceV > 0)){
	totalTime = distanceV * paceConv;
	answer = timeConv(totalTime);
	ttList.slideUp();
	divTotalTime.append("<h4>"+answer+"</h4>");
	}
	else if((ttHourV > 0 \|\| ttMinV > 0 \|\| ttSecV > 0) && (distanceV > 0)){
	totalPace = ttConv/distanceV;
	answer = timeConv(totalPace);
	paceList.slideUp();
	divPace.append("<h4>"+answer+"</h4>");
	}
	else if((paceHourV > 0 \|\| paceMinV > 0 \|\| paceSecV > 0) && (ttHourV > 0 \|\| ttMinV > 0 \|\| ttSecV > 0)){
	totalDistance = (ttConv/paceConv).toFixed(2);
	distList.slideUp();
	divDistance.append("<h4>"+totalDistance+" m/km</h4>");
	}
	else{
	alert("You are missing some data, please enter info in at least two categories.")
	}
	});

	$("#resetButton").on("click", function(){
	var info = $(".info");
	var paceList = $("#pace-list");
	var distList = $("#dist-list");
	var ttList = $("#tt-list");

	ttList.slideDown();
	paceList.slideDown();
	distList.slideDown();
	$("h4").fadeOut();
	info.val('');
	});
	});