commit 8570610ccf2c84cea5bb5d35886a05aec763b0f8
parent e7bf53f9b8212c7b0456248abbd83c898e64b426
Author: Jake Bauer <jbauer@paritybit.ca>
Date: Thu, 27 Aug 2020 15:32:05 -0400
Add time duration calculator tool
Diffstat:
4 files changed, 170 insertions(+), 16 deletions(-)
diff --git a/pages/projects.md b/pages/projects.md
@@ -40,6 +40,7 @@ warning should pop up on those pages if you do not have JavaScript enabled.
### Web-Based Utilities
<ul id="web-utils">
+ <li><a href="projects/time-duration-calculator">Time Duration Calculator</a></li>
<li><a href="projects/borderlands-3-dps-calculator">Borderlands 3 DPS Calculator</a></li>
<li><a href="projects/morrowind-character-roller">Morrowind Character Roller</a></li>
<li class="sublist-header">Dungeons & Dragons
diff --git a/pages/projects/time-duration-calculator.md b/pages/projects/time-duration-calculator.md
@@ -12,26 +12,31 @@ JavaScript or it has been disabled. JavaScript is required for this applet to
function.</noscript>
Use this tool to quickly calculate the duration between times. Times are all in
-the 24 hour clock (i.e. no AM/PM).
+the 24 hour clock (i.e. no AM/PM). This calculator supports durations which
+cross midnight.
-<div id="grid-container">
+<form action="javascript:calculate();">
<label for="start-time-h">Hour</label>
- <input id="start-time-h" placeholder="0-24" autofocus>
+ <input id="start-time-h" type="number" min="0" max="24" placeholder="0-24" autofocus>
<label for="start-time-h">Minute</label>
- <input id="start-time-m" placeholder="0-60">
+ <input id="start-time-m" type="number" min="0" max="60" placeholder="0-60">
<label for="start-time-h">Second</label>
- <input id="start-time-s" placeholder="0-60"> to
+ <input id="start-time-s" type="number" min="0" max="60" placeholder="0-60"> to
<br/>
<label for="end-time-h">Hour</label>
- <input id="end-time-h" placeholder="0-60">
+ <input id="end-time-h" type="number" min="0" max="24" placeholder="0-60">
<label for="end-time-h">Minute</label>
- <input id="end-time-m" placeholder="0-60">
+ <input id="end-time-m" type="number" min="0" max="60" placeholder="0-60">
<label for="end-time-h">Second</label>
- <input id="end-time-s" placeholder="0-60">
+ <input id="end-time-s" type="number" min="0" max="60" placeholder="0-60">
<br/>
- <button id="calc-btn" onClick="calculate()">Calculate</button>
- <p id="result-field">00:00:00</p>
- <p id="result-field-hours">0 hours</p>
- <p id="result-field-minutes">0 minutes</p>
- <p id="result-field-seconds">0 seconds</p>
+ <button id="calc-btn" type="submit">Calculate</button>
+ <button id="clear-btn" type="button" onClick="clear_inputs()">Reset</button>
+</form>
+
+<div id="grid-container">
+ <p id="duration-label"><b>Duration:</b></p> <p id="result-field">00h:00m:00s</p>
+ <p id="hours-label"><b>Hours:</b></p> <p id="result-field-hours">0.0000</p>
+ <p id="minutes-label"><b>Minutes:</b></p> <p id="result-field-minutes">0.0000</p>
+ <p id="seconds-label"><b>Seconds:</b></p> <p id="result-field-seconds">0</p>
</div>
diff --git a/public/js/time-duration-calculator.js b/public/js/time-duration-calculator.js
@@ -17,10 +17,100 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
+startTimeH = 0;
+startTimeM = 0;
+startTimeS = 0;
+
+endTimeH = 0;
+endTimeM = 0;
+endTimeS = 0;
+
+resultTimeH = 0;
+resultTimeM = 0;
+resultTimeS = 0;
+
+totalTimeH = 0;
+totalTimeM = 0;
+totalTimeS = 0;
+
+// From: https://gist.github.com/andrewrk/4382935
+function pad_with_zeros(number, size) {
+ number = number.toString();
+ while (number.length < size) number = "0" + number;
+ return number;
+}
+
+function clear_inputs() {
+ document.getElementById("start-time-h").value = "";
+ document.getElementById("start-time-m").value = "";
+ document.getElementById("start-time-s").value = "";
+ document.getElementById("end-time-h").value = "";
+ document.getElementById("end-time-m").value = "";
+ document.getElementById("end-time-s").value = "";
+}
+
function get_inputs() {
- document.getElementById
+ startTimeH = Number(document.getElementById("start-time-h").value);
+ startTimeM = Number(document.getElementById("start-time-m").value);
+ startTimeS = Number(document.getElementById("start-time-s").value);
+ endTimeH = Number(document.getElementById("end-time-h").value);
+ endTimeM = Number(document.getElementById("end-time-m").value);
+ endTimeS = Number(document.getElementById("end-time-s").value);
+
+ if (startTimeH < 0 || startTimeH > 23 || endTimeH < 0 || endTimeH > 23) {
+ alert("Hours must be between 0 and 23");
+ throw "Error: Number out of bounds.";
+ }
+ if (startTimeM < 0 || startTimeM > 59 || endTimeM < 0 || endTimeM > 59
+ || startTimeS < 0 || startTimeS > 59 || endTimeS < 0 || endTimeS > 59) {
+ alert("Seconds/Minutes must be between 0 and 59");
+ throw "Error: Number out of bounds.";
+ }
+}
+
+function display_results() {
+ resultString = pad_with_zeros(resultTimeH, 2) +
+ "h:" + pad_with_zeros(resultTimeM, 2) +
+ "m:" + pad_with_zeros(resultTimeS, 2) + "s";
+ document.getElementById("result-field").innerHTML = resultString;
+ document.getElementById("result-field-hours").innerHTML = totalTimeH.toFixed(4);
+ document.getElementById("result-field-minutes").innerHTML = totalTimeM.toFixed(4);
+ document.getElementById("result-field-seconds").innerHTML = totalTimeS;
}
function calculate() {
- get_inputs()
+ get_inputs();
+
+ // Seconds
+ if (endTimeS < startTimeS) {
+ resultTimeS = (endTimeS + 60) - startTimeS;
+ endTimeM--;
+ }
+ else {
+ resultTimeS = endTimeS - startTimeS;
+ }
+
+ // Minutes
+ if (endTimeM < startTimeM) {
+ resultTimeM = (endTimeM + 60) - startTimeM;
+ endTimeH--;
+ }
+ else {
+ resultTimeM = endTimeM - startTimeM;
+ }
+
+ // Hours
+ if (endTimeH < startTimeH) {
+ resultTimeH = (endTimeH + 24) - startTimeH;
+ }
+ else {
+ resultTimeH = endTimeH - startTimeH;
+ }
+
+ // Single-unit totals
+ totalTimeH = resultTimeH + (resultTimeM / 60) + (resultTimeS / 3600);
+ totalTimeM = (resultTimeH * 60) + resultTimeM + (resultTimeS / 60);
+ totalTimeS = (resultTimeH * 3600) + (resultTimeM * 60) + resultTimeS;
+
+ display_results();
}
diff --git a/style/tdc.css b/style/tdc.css
@@ -1,8 +1,66 @@
input {
- max-width: 3em;
+ max-width: 4em;
margin-bottom: 0.5em;
}
button {
margin-top: 0.5em;
}
+
+#grid-container p {
+ margin: 0;
+}
+
+#grid-container {
+ display: grid;
+ grid-gap: 1em;
+ grid-template-columns: 5em auto;
+ margin-top: 1em;
+}
+
+#duration-label,
+#hours-label,
+#minutes-label,
+#seconds-label {
+ grid-column: 1;
+ text-align: right;
+}
+
+#duration-label {
+ grid-row: 1;
+}
+
+#hours-label {
+ grid-row: 2;
+}
+
+#minutes-label {
+ grid-row: 3;
+}
+
+#seconds-label {
+ grid-row: 4;
+}
+
+#result-field,
+#result-field-hours,
+#result-field-minutes,
+#result-field-seconds {
+ grid-column: 2;
+}
+
+#result-field {
+ grid-row: 1;
+}
+
+#result-field-hours {
+ grid-row: 2;
+}
+
+#result-field-minutes {
+ grid-row: 3;
+}
+
+#result-field-seconds {
+ grid-row: 4;
+}
