How to create a function to calculate/sum hours and minutes

Question

I would like to create a function to calculate/sum the time. For Example I work 40 hours per week and I want to sum all hours and minutes of each Day which I worked to find out how many hours did I work. I tried with Moment.js but no luck :/

var fTime = document.querySelector('input[id="fromTime"]').value;
var tTime = document.querySelector('input[id="toTime"]').value;
var btn = document.querySelector(".btn");
var sum = document.querySelector(".sum");
var reset = document.querySelector(".reset");
btn.onclick = sumTimes;


function sumTimes(){
  sum.innerHTML = "You Worked " + tTime + " hours";
  reset.style.opacity = 1;
}

reset.onclick = (e)=>sum.innerHTML = "00:00"

div.hours{
  width:300px;
  background-color:red;
  heigth:70px;
  text-align:center;
  color:white;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hours > *{
  margin:3px;
}
.reset{
  opacity:0;
}

<div class="wrapper">
  <div class="hours">
    <h2>Your Time</h2>
    <label for="fromTime">From: </label>
    <input id="fromTime" type="time" name="fromTime" value="13:30">
    <label for="toTime">To: </label>
    <input id="toTime" type="time" name="toTime" value="14:30">
    <button class="btn">Enter</button>
    <div class="sum">00:00</div>
    <button class="reset">Reset</button>
  </div>
</div>

Please see [ask], then revise your post and title to ask something more specific. Don't make us analyze your entire app to see what does and doesn't work. — isherwood, Mar 16 '22 at 13:42
Currently you're just dumping the value of your second input into the time worked text. How is that supposed to work? — isherwood, Mar 16 '22 at 13:50
I know it dosn't work, but I tried with moment.js and I didnt know what to do, this is y I just wrote it down :/ — HamiD, Mar 16 '22 at 13:52

Terry Lennox · Answer 1 · 2022-03-16T15:19:48.483

We can calculate the totalMinutes worked by splitting the from time and to time into their hour and minute components.

Once we have the total minutes worked, we can format this as hours and minutes using a minutesToHoursAndMinutes() function.

If we enter a To: time that is earlier than the From: time, we'll show an error rather than trying to show a negative time.

I've added a getTotalMinutesWorked() function that will calculate the total minutes worked from the user inputs.

var btn = document.querySelector(".btn");
var sum = document.querySelector(".sum");
var reset = document.querySelector(".reset");
btn.onclick = sumTimes;

function getTotalMinutesWorked() {
  const fromTime = document.getElementById('fromTime').value;
  const toTime = document.getElementById('toTime').value;

  const [fromHours, fromMinutes] = fromTime.split(':');
  const [toHours, toMinutes] = toTime.split(':');
 
  // Total minutes worked is calculated by getting the difference in hours x 60 and adding the difference in minutes.
  return (toHours - fromHours) * 60 + (toMinutes - fromMinutes);
}

function sumTimes() {
  const totalMinutes = getTotalMinutesWorked();
  if (totalMinutes < 0) {
      sum.innerHTML = "The To time should be later than From time"
      return;
  }

  sum.innerHTML = "You Worked " + minutesToHoursAndMinutes(totalMinutes)  + " hours";
  reset.style.opacity = 1;
}

function minutesToHoursAndMinutes(minutes) {
    const hours = Math.floor(minutes / 60);
    const mins = (minutes % 60);
    return (hours + '').padStart(2, '0') + ':' + (mins + '').padStart(2, '0')
}

reset.onclick = (e)=>sum.innerHTML = "00:00"

div.hours{
  width:300px;
  background-color:red;
  heigth:70px;
  text-align:center;
  color:white;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hours > *{
  margin:3px;
}
.reset{
  opacity:0;
}

<div class="wrapper">
  <div class="hours">
<h2>Your Time</h2>
<label for="fromTime">From: </label>
<input id="fromTime" type="time" name="fromTime" value="13:30">
<label for="toTime">To: </label>
<input id="toTime" type="time" name="toTime" value="14:30">
<button class="btn">Enter</button>
<div class="sum">00:00</div>
<button class="reset">Reset</button>
  </div>
</div>

Thank you, how to add the time to a variable, so every time I click on "Enter" button, the variabl sums the result time? — HamiD, Mar 16 '22 at 14:11

Tayfun Yuksel · Answer 2 · 2022-03-16T13:56:22.083

-1

You can do it by using moment.js

look the following article:

use moment js for difference two dates

or pure javascript code

//sumTimes();

function sumTimes(){
 var day1 = Date.parse('01/01/1900 14:00');
 var day2 = Date.parse('01/01/1900 19:00');
 var diff = Math.abs(day2 - day1);
 console.log(diff);
}

this will give difference by miliseconds.

edited Mar 16 '22 at 13:56

answered Mar 16 '22 at 13:44

Tayfun Yuksel

142
9

1. OP already said `I tried with Moment.js but no luck :/` so suggesting "you can use moment.js" isn't very helpful without more info. 2. please don't ONLY link to external pages, as those pages may disappear at some point and then your answer becomes useless. Please edit your question to include a complete explanation of how to use moment.js to do this. – WOUNDEDStevenJones Mar 16 '22 at 13:46
Please see [answer] for more tips. – isherwood Mar 16 '22 at 13:48
Thank you @tayfun, I merged it with another code and got what I need. :) – HamiD Mar 16 '22 at 14:06
@HamidD glad i could help – Tayfun Yuksel Mar 16 '22 at 14:07

How to create a function to calculate/sum hours and minutes

2 Answers2

Linked