DEV Community

Cover image for What is the difference between two times? ⌚️
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

What is the difference between two times? ⌚️

📣 Chris, make a speedtest report of this function!
Uhh, Ok! No problem but shit my math is not good.

...

Opens up Time diff website -> Pastes two times -> reports back.

It might be just my math being so bad, but let's make a simple real-world tool that will give us the time past two times.

It will end up looking like this Codepen.

HTML Structure

<div class="container">
  <div class="dates">
    <div class="start">
      <i>Start time:</i> <br />
      <input type="number" min="0" max="24" id="s_h" placeholder="HH" />
      <input type="number" min="0" max="60" id="s_m" placeholder="MM" />
      <input type="number" min="0" max="60" id="s_s" placeholder="SS" />
    </div>
    <div class="space"></div>
    <div class="end">
      <i>End time:</i> <br />
      <input type="number" min="0" max="24" id="e_h" placeholder="HH" />
      <input type="number" min="0" max="60" id="e_m" placeholder="MM" />
      <input type="number" min="0" max="60" id="e_s" placeholder="SS" />
    </div>
  </div>
  <button id="button">Perform some magic ✨</button>
  <div id="output"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

We need two divs that will each keep three inputs for the hours, minutes, and seconds.
Then we need a button to perform our magic on click, and a output div to place the result in!

CSS Styling

Let's make the above show a bit nicer:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  background: #4ea8de;
}
.dates {
  display: flex;
  text-align: center;
}
.dates i {
  margin-bottom: 10px;
}
.dates input {
  width: 40px;
  padding: 5px;
  margin-top: 10px;
}
.space {
  margin: 0px 10px;
}
button {
  margin-top: 20px;
  font-size: 24px;
  padding: 10px 20px;
  background: #7400b8;
  border-radius: 5px;
  color: #80ffdb;
  cursor: pointer;
  transition: all 0.5s ease;
}
button:hover {
  background: #6930c3;
}
#output {
  margin-top: 20px;
  font-size: 18px;
}
Enter fullscreen mode Exit fullscreen mode

I'm mainly using flexbox to center some elements and adding some margins and colors to make it look better.

Note that we are adding a transition to the button; this will make the button background easily fade instead of a hard hover effect. Another cool transition is this Hamburger menu.

JavaScript time past between two times

On to the magic part, JavaScript is what is going to make everything work.

First, we need to define all our variables

  • The 6 inputs
  • The button
  • and the output div
const startHour = document.getElementById('s_h'),
  startMinute = document.getElementById('s_m'),
  startSecond = document.getElementById('s_s'),
  endHour = document.getElementById('e_h'),
  endMinute = document.getElementById('e_m'),
  endSecond = document.getElementById('e_s'),
  button = document.getElementById('button'),
  output = document.getElementById('output');
Enter fullscreen mode Exit fullscreen mode

As you can see above, we can add one row of variables, just beats writing const or var every time. You can space them out with comma's.

Now let's add a click event to our button:

button.addEventListener('click', function() {
  // Code coming here
  // 👇
});
Enter fullscreen mode Exit fullscreen mode

Awesome, now we need to get our start and end date inside this click:

let startDate = new Date(
  2020,
  05,
  05,
  startHour.value,
  startMinute.value,
  startSecond.value
);
let endDate = new Date(2020, 05, 05, endHour.value, endMinute.value, endSecond.value);
Enter fullscreen mode Exit fullscreen mode

We just define a random day, we only using the time settings in this example.

Now let's get the difference between these two times!

let difference = endDate.getTime() - startDate.getTime();
Enter fullscreen mode Exit fullscreen mode

The getTime() function returns the timestamp, which makes it easier to calculate with

Let's first check if the end date is not in the future:

if (difference < 0) {
  output.innerHTML = 'Wow dude, you just went back to the future! 👽';
} else {
  // Code coming below
  // 👇
}
Enter fullscreen mode Exit fullscreen mode

So we are giving the user some feedback if the is trying to scam us, the tug! 👀

difference = difference / 1000;
let hourDifference = Math.floor(difference / 3600);
difference -= hourDifference * 3600;
let minuteDifference = Math.floor(difference / 60);
difference -= minuteDifference * 60;
output.innerHTML = `${hourDifference} hours, ${minuteDifference} minutes, ${difference} seconds`;
Enter fullscreen mode Exit fullscreen mode

Wow, hold your horses, what's going on here? 🤠

First, we need to divide the difference by 1000. This removes the milliseconds.

Then we say give us the hours past in the difference, 3600 = (60 seconds * 60 minutes = 1 hour).
We are using Math.floor to always round downwards. We don't want 0.9 hours to become 1.

Next, we need to detract the passed hours from the difference.

We do the same for the minutes, but we only need to divide by 60, since we detracted the hours already.
Then again, we remove whatever minutes passed.

The difference we end up with is the seconds!

Then we use some liquid template tags (${variable}) to return the result to the user!

Voila! We are now masters of time and universe 🧙‍♂️!

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (2)

Collapse
 
abdisalan_js profile image
Abdisalan

Another day, another tip. Love the tips and consistency :)

I thought of an alternate way to calculate the time difference! Its not better or worse but was how it came in my head.

difference = difference / 1000;
let hourDifference = Math.floor(difference / 3600)
let minuteDifference = Math.floor(difference % 3600 / 60);
let secondDifference = Math.floor(difference % 60);
Collapse
 
dailydevtips1 profile image
Chris Bongers

Yeah that would actually work and looks cleaner! Nice addition man 💙