paritybit.ca

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

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:
Mpages/projects.md | 1+
Mpages/projects/time-duration-calculator.md | 31++++++++++++++++++-------------
Mpublic/js/time-duration-calculator.js | 94+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
Mstyle/tdc.css | 60+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
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; +}