Skip to content

Instantly share code, notes, and snippets.

@alexadam819

alexadam819/index.html

Created April 15, 2017 03:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexadam819/2dfc9df1c3b32b2641f9fb02dbab4639 to your computer and use it in GitHub Desktop.
Save alexadam819/2dfc9df1c3b32b2641f9fb02dbab4639 to your computer and use it in GitHub Desktop.
Download ZIP
timeCalculator
Raw
index.html
<!DOCTYPE html>
<head>
<script language="JavaScript">
window.onload = function() {
var seconds = document.getElementById("secondsDD");
var minutes = document.getElementById("minutesDD");
var hours = document.getElementById("hoursDD");
for(var i = 0; i < 60; i++){
var optionNumberSeconds = document.createElement("option");
optionNumberSeconds.text = i;
optionNumberSeconds.value = i;
seconds.add(optionNumberSeconds);
var optionNumberMinutes = document.createElement("option");
optionNumberMinutes.text = i;
optionNumberMinutes.value = i;
minutes.add(optionNumberMinutes);
var optionNumberHours = document.createElement("option");
optionNumberHours.text = i;
optionNumberHours.value = i;
hours.add(optionNumberHours);
}
}
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<html>
<body>
<div class="container">
<div class="row">
<h1 class="text-center">Time Calculator</h1>
<div class="col-sm-4">
<div class="form-group">
<label for="hours">Hours:</label>
<select name="hours" id="hoursDD" class="form-control"></select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="minutes">Minutes:</label>
<select name="minutes" id="minutesDD" class="form-control"></select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="seconds">Seconds:</label>
<select name="seconds" id="secondsDD" class="form-control"></select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<button type="button" class="btn btn-primary" onclick="calculateTime('add')"><i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-success" onclick="calculateTime('subtract')"><i class="fa fa-minus" aria-hidden="true"></i></button>
</div>
</div>
<div class="row text-center">
<h1>Total time is</h1>
<h2>
<span id="totalHours">00</span> hs :
<span id="totalMinutes">00</span> mins :
<span id="totalSeconds">00</span> secs
</h2>
<div id="previousInputs"></div>
</div>
</div>
<script>
var globalSeconds = 0;
function calculateTime(operation) {
var seconds = document.getElementById("secondsDD").value;
var minutes = document.getElementById("minutesDD").value * 60;
var hours = (document.getElementById("hoursDD").value * 60) * 60;
var operator = "+";
var globalHolder = globalSeconds;
if (operation === "add"){
globalHolder += (+seconds) + (+minutes) + (+hours);
} else{
globalHolder -= ((+seconds) + (+minutes) + (+hours));
operator = "-"
}
if(globalHolder < 0){
alert("No such thing as negative time!");
}else{
globalSeconds = globalHolder;
var totalSeconds = globalSeconds % 60;
var totalHours = Math.floor(globalSeconds / 3600);
var totalMinutes = (globalSeconds - totalSeconds - (totalHours * 3600) ) / 60;
document.getElementById("totalHours").textContent = totalHours;
document.getElementById("totalMinutes").textContent = totalMinutes;
document.getElementById("totalSeconds").textContent = totalSeconds;
var timeString = '<p>' + operator + ' ' + document.getElementById("hoursDD").value + 'hrs : ' + document.getElementById("minutesDD").value + 'mins : ' + document.getElementById("secondsDD").value + 'secs</p>';
document.getElementById("previousInputs").innerHTML += timeString;
}
document.getElementById("secondsDD").value = 0;
document.getElementById("minutesDD").value = 0;
document.getElementById("hoursDD").value = 0;
};
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" />
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment