Calc duration with JS

Using JavaScript, let's create a Calc duration with JS

Code

HTML

<form action="">
  <fieldset>
    <legend>Hora 1</legend>
    <label for="initHour">Hora(s): </label>
    <input type="number" name="initHour" id="initHour" value="0" />

    <label for="initMin">Minuto(s): </label>
    <input type="number" name="initMin" id="initMin" value="0" />

    <label for="initSec">Segundo(s): </label>
    <input type="number" name="initSec" id="initSec" value="0" />
  </fieldset>
  <fieldset>
    <legend>Hora 2</legend>
    <label for="endHour">Hora(s): </label>
    <input type="number" name="endHour" id="endHour" value="0" />

    <label for="endMin">Minuto(s): </label>
    <input type="number" name="endMin" id="endMin" value="0" />

    <label for="endSec">Segundo(s): </label>
    <input type="number" name="endSec" id="endSec" value="0" />
  </fieldset>
  <button type="button" id="sum">Somar</button>
  <button type="button" id="subtract">Subtrair</button>
  <button type="reset">Resetar</button>
</form>
<hr>
<fieldset>
  <legend>Resultado</legend>
  <label for="outHour">Hora(s): </label>
  <input type="text" name="outHour" id="outHour" />

  <label for="outMin">Minuto(s): </label>
  <input type="text" name="outMin" id="outMin" />

  <label for="outSec">Segundo(s): </label>
  <input type="text" name="outSec" id="outSec" />

  <hr>

  <label for="fullOut">Horario Completo: </label>
  <span id="fullOut"></span>
</fieldset>

This code is a HTML form that allows the user to input two sets of time (hour, minute, and second) and perform mathematical operations (addition and subtraction) on them. The result is displayed in the "Resultado" fieldset as the hour, minute, and second, as well as a full time format. There are also buttons to reset the form and instructions on how to use the calculator. The code also includes a "SWITCH" function that automatically switches the input values if the first input is greater than the second input, in order to avoid a negative result.

JS

let initHour = document.querySelector('#initHour');
let initMin = document.querySelector('#initMin');
let initSec = document.querySelector('#initSec');

let endHour = document.querySelector('#endHour');
let endMin = document.querySelector('#endMin');
let endSec = document.querySelector('#endSec');

let outHour = document.querySelector('#outHour');
let outMin = document.querySelector('#outMin');
let outSec = document.querySelector('#outSec');

let fullOut = document.querySelector('#fullOut');

document.querySelector('#sum').addEventListener('click', sum);
document.querySelector('#subtract').addEventListener('click', subtract);

function inverter() {
  let tempHour = initHour.value;
  let tempMin = initMin.value;
  let tempSec = initSec.value;

  initHour.value = endHour.value;
  initMin.value = endMin.value;
  initSec.value = endSec.value;

  endHour.value = tempHour;
  endMin.value = tempMin;
  endSec.value = tempSec;            
}

function subtract() {
  if(Number(initHour.value) < Number(endHour.value)) {
    inverter();
  }
  let time = {};
  let hour = 0;
  let minute = 0;
  let second = 0;

  time = verifyValue(Number(initSec.value), Number(endSec.value));
  second = time.valueOne;
  minute = time.valueTwo;

  time = verifyValue(Number(initMin.value), Number(endMin.value));
  minute += time.valueOne;
  hour = time.valueTwo;

  hour += Math.abs(Number(initHour.value) - Number(endHour.value));
  out(hour, minute, second);
}

function verifyValue(initValue, endValue) {
  let valueOne = 0;
  let valueTwo = 0;
  if(initValue < endValue) {
    valueOne += (initValue+60)- endValue;
    valueTwo--;
  } else {
    valueOne = Math.abs(initValue - endValue);
  }
  return {valueOne, valueTwo};
}

function sum() {
  let hour = Number(initHour.value) + Number(endHour.value);
  let minute = Number(initMin.value) + Number(endMin.value);
  if(minute >= 60) {
    hour++;
    minute -= 60;
  }
  let second = Number(initSec.value) + Number(endSec.value);
  if(second >= 60) {
    minute++;
    second -= 60;
  }
  out(hour, minute, second);
}

function out(hour, minute, second) {
  outHour.value = hour;
  outMin.value = minute;
  outSec.value = second;

  fullOut.innerHTML = `${addZero(hour)}:${addZero(minute)}:${addZero(second)}`;
}

function addZero(input) {
  return input > 9 ? input : `0${input}`;
}

This code is a JavaScript script that calculates the difference or sum of two time inputs, and displays the result in both a numerical format and a formatted string.

The script first declares several variables, which are references to the DOM elements of the input fields and output fields for hours, minutes, and seconds, as well as a variable for the full output string.

Next, the script attaches event listeners to two buttons, one for the "sum" operation and one for the "subtract" operation.

The script defines several functions:

• The "inverter" function swaps the values of the start and end time input fields.
• The "subtract" function calculates the difference between the start and end time input fields. It uses the "inverter" function if the start time is later than the end time. It also calls the "verifyValue" function to ensure the minutes and seconds are properly calculated. It then calls the "out" function to display the result.
• The "verifyValue" function takes in two values and checks if the first value is less than the second value. If it is, it calculates the difference between the two values and subtracts 60 from the first value. It then returns an object with two properties: "valueOne" and "valueTwo".
• The "sum" function calculates the sum of the start and end time input fields, calls the "out" function to display the result.
• The "out" function takes in three values (hours, minutes, and seconds) and sets the values of the output fields accordingly. It also calls the "addZero" function to ensure that single-digit values are formatted with a leading zero.
• The "addZero" function takes in a value and returns it as a string with a leading zero if it is less than 10.

Demo

See below for the complete working project.

💡 NOTE: If you can't see it click here and see the final result

---

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

---

Support Me

Youtube - WalterNascimentoBarroso
Github - WalterNascimentoBarroso
Codepen - WalterNascimentoBarroso